10、 编写HTML注册表单, 需要字段: 用户名,

html-css010

10、 编写HTML注册表单, 需要字段: 用户名,,第1张

//html文档如下,其实还能更简洁,请采纳

<html>

<head>

<title>HTML注册表单</title>

<script type="text/javascript">

function sub(){

var f = document.form1//取form对象

var userName = f.userName.value//取用户名

var passWord = f.passWord.value//取密码

var repassWord = f.repassWord.value//取确认密码

var box1 = f.theRead.checked//判断复选框是否被选中

var box2 = f.theTravel.checked//判断复选框是否被选中

var box3 = f.theInt.checked//判断复选框是否被选中

var count = (box1 ? 1 : 0) + (box2 ? 1 : 0) + (box3 ? 1 : 0)//判断复选框被选中几个

var readme = f.readme.value//取自我介绍内容

var rename = new RegExp("^[a-zA-Z_][a-zA-Z_0-9]{0,}", "")//匹配用户名的正则表达式

var repass = new RegExp("[a-zA-Z_0-9]{6,16}", "")//匹配密码的正则表达式

if(userName == ""){

alert("用户名不能为空!")

return false

}else if(rename.test(userName) == false){

alert("用户名: 必须是字母数字或下划线, 不能以数字开头")

return false

}else{

if(passWord == ""){

alert("用户密码不能为空!")

return false

}else if(repass.test(passWord) == false){

alert("密码: 必须是6-16位字母数字下划线!")

return false

}else{

if(repassWord == ""){

alert("请输入确认密码!")

return false

}else if(passWord != repassWord){

alert("两次输入的密码不一致!")

return false

}else{

if(count <1){

alert("请选择至少一项兴趣爱好!")

return false

}else{

if(readme == ""){

alert("请填写个人介绍!")

return false

}

}

}

}

}

}

</script>

</head>

<body>

<form name="form1" id="form1" action="" method="post" onsubmit="return sub()">

用 户 名:<input type="text" name="userName" id="userName" value=""/>

<br>

用户密码:<input type="password" name="passWord" value=""/>

<br>

确认密码:<input type="password" name="repassWord" value=""/>

<br>

性别:

<input type="radio" name="theSex" value="0" checked=”default” />男

<input type="radio" name="theSex" value="1" />女

<br>

城市:

<select name="theCity">

<option value="0">郑州</option>

<option value="1">上海</option>

<option value="2">天津</option>

<option value="3">深圳</option>

</select>

<br>

兴趣爱好:

<input type="checkbox" name="theRead" value="0" />阅读

<input type="checkbox" name="theTravel" value="1" />旅游

<input type="checkbox" name="theInt" value="2" />上网

<br>

个人简介:

<br>

<textarea rows="5" cols="30" name="readme"></textarea>

<br>

<input type="submit" value="提交"/>

</form>

</body>

</html>

是你的javascript代码写错了 ---->

//检查生日格式是否正确

alert( "生日输入不正确!" )

retrun false 看这里 return 你误写成retrun了 呵呵

}

另外有的地方多了一些多余的空格 不是到是不是百度的问题 给你修改好了 直接把代码粘贴上就好

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">

</head>

<script>

function check(){

username=document.form1.username.value

pwd1=document.form1.pwd1.value

pwd2=document.form1.pwd2.value

year=document.form1.year.value

month=document.form1.month.value

day=document.form1.day.value

email=document.form1.email.value

interest=document.form1.interest.value

if(username.length<6||username.length>15){

//检查用户名是否在指定的范围之内

alert("用户名长度必须在6-15位之间!")

return false

}

if(pwd1.length<6||pwd1.length>20){

//检查密码是否在指定范围之内

alert("密码必须在6-15位之间!")

return false

}

if(pwd1!=pwd2){

//检查密码是否一致

alert("密码不匹配!")

return false

}

if(year.length!=4 || month>13 || month<1 || day>32 || day<1){

//检查生日格式是否正确

alert("生日输入不正确!")

return false

}

if(email=""||(email.indexOf('@'==-1))||(email.indexOf('.')==-1)){

//检查电子邮件格式是否正确

alert("电子邮箱格式不正确!")

return false

}

return true

}

</script>

<body bgcolor="#ffffff" text="#000000">

<p align="center">请输入注册信息</p>

<form name="form1" method="post" action="register.jsp" onSubmit="return check()" >

<table width="36%"border="1" cellspacing="1" cellspacing="1" align="center" height="160">

<tr>

<td width="45%">用户名(6-15位)</td>

<td width="55%">

<input type="text" name="username" size="15">

</td>

</tr>

<tr>

<td width="45%">密码(6-10位)</td>

<td width="55%" >

<input type="password" name="pwd1" size="10">

</td>

</tr>

<tr>

<td width="45%">确认密码</td>

<td width="55%">

<input type="password" name="pwd2" size="10">

</td>

</tr>

<tr>

<td width="45%">出生日期</td>

<td width="55%">

<input type="text" name="year" size="4">

<input type="text" name="month" size="2">

<input type="text" name="day" size="2">

</td>

</tr>

<tr>

<td width="45%">性别</td>

<td width="55%">

<input type="radio" name="gender" value="男" selected>

<input type="radio" name="gender" value="女">

</td>

</tr>

<tr>

<td width="45%">电子邮件</td>

<td width="55%">

<input type="text" name="email" size="20">

</td>

</tr>

<tr>

<td width="45%">爱好</td>

<td width="55%">

<input type="text" name="interest" size="20">

</td>

</tr>

</table>

<p align="center">

<input type="submit" name="Submit" value="提交">

<input type="reset" name="Submit2" value="重置">

</p>

</form>

<p></p>

<p></p>

</body>

</html>

在table外面再套个form

<form name="f1" method="post" action="abc.php">

</form>

这样点击submit会跳转的abc.php页面,再该页面中处理post提交的数据