表单验证

来源：互联网发布：新加坡手机网络制式编辑：程序博客网时间：2024/04/16 13:04

下面是html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>form</title><script type="text/javascript" src="script/checkdata.js"></script></head><body><form action="www.sina.com.cn" method="post" onsubmit="return checkdata();" ><table width="500" border="1" align="center">    <tr><td align="center" height="10" colspan="2"><font size="+2" style="color:#3399FF">用户注册</td>  </tr>  <tr><td width="30%">用户名:</td><td><input  name="username" id="username"   type="text" maxlength="30" onblur="checkName(this.value)" /><span  id="nameError"></span></td>  </tr>  <tr><td>密码:</td><td><input name="password" id="password1"type="text" maxlength="30" onblur="checkPassword1(this.value)" /><span id="pd1Error"></span></td>  </tr>  <tr><td>确认密码;</td><td><input name="password2" id="password2" type="text" maxlength="30" onblur="checkPassword2(this.value)"/><span id="pd2Error"></span></td>  </tr>  <tr><td>性别;</td><td><input name="sex" type="radio" value="male" checked />男<input name="sex" type="radio" value="female" />女</td>  </tr>  <tr><td>你感兴趣的</td><td><input name="interest" type="checkbox" value="vc" checked="checked"/>vc<input name="interest" type="checkbox" value="vb" />vb<input name="interest" type="checkbox" value="foxpro" />foxpro<input name="interest" type="checkbox" value="java" />java<br /><input name="interest" type="checkbox" value="bc" />bc<input name="interest" type="checkbox" value="cobol" />cobol<input name="interest" type="checkbox" value="delphi" />delphi</td>  </tr>  <tr><td>你感兴趣的</td><td><select name="interest2" size="5" multiple><option value="vc" selected>vc</option><option value="vb">vb</option><option value="foxpro">foxpro</option><option value="java">java</option><option value="bc">bc</option><option value="cobol">cobol</option><option value="delphi">delphi</option></select><span>可以按住trl键多选</span></td>  </tr>  <tr><td>你来自</td><td><select name="province" size="1"><option value="34">河南</option><option value="33">湖南</option><option value="32">海南</option><option value="31">山西</option><option value="35">四川</option><option value="36">浙江</option><option value="37">山东</option></select></td>  </tr>  <tr><td>自我介绍</td><td><textarea name="intraduce" cols="50" rows="10" wrap="hard"> </textarea></td>  </tr>  <tr><td></td><td><input type="submit" value="提交"><input type="reset" value="重置"></td>  </tr></table></form></body></html>

下面是js代码

function checkdata() {<!--alert('1')-->var sn = document.getElementById("username").value.toLowerCase();var pd1 = document.getElementById("password1").value.toLowerCase();var pd2 = document.getElementById("password2").value.toLowerCase();if(checkName(sn)&&checkPassword1(pd1)&&checkPassword2(pd2)) return true;elsereturn false;}function checkName(sn) {//alert("2")//检查用户名用户名不能小于3或大于18位if(sn.length<3||sn.length>18) {<!--alert('true')-->document.getElementById("nameError").innerHTML='<font color=red >用户名不能小于3或大于18位</font>'document.getElementById("username").focus()return false;}else {document.getElementById("nameError").innerHTML=''}//判断是否是空白字符var whiteSpace=' \n\t\r'var i,c;for(i=0;i<sn.length;i++) {c = sn.charAt(i);if(whiteSpace.indexOf(c)!=-1){document.getElementById("nameError").innerHTML='<font color=red >用户名不能包含空白字符</font>'document.getElementById("username").focus()    return false}}return true;}function checkPassword1(pd){//判断是否小于6位if(pd.length<6){document.getElementById("pd1Error").innerHTML='<font color=red >密码不能少于6位</font>'document.getElementById("password1").focus()return false}document.getElementById("pd1Error").innerHTML='';//判断是否是空白字符var whiteSpace=' \n\t\r'var i,c;for(i=0;i<pd.length;i++) {c = pd.charAt(i);if(whiteSpace.indexOf(c)!=-1) {document.getElementById("pd1Error").innerHTML='<font color=red >密码不能包含空白字符</font>'document.getElementById("password1").focus()return false}}document.getElementById("pd1Error").innerHTML=''return true;}function checkPassword2(pd){//判断是否小于6位if(pd.length<6){document.getElementById("pd2Error").innerHTML='<font color=red >密码不能少于6位</font>'document.getElementById("password2").focus()return false}document.getElementById("pd2Error").innerHTML='';//判断是否是空白字符var whiteSpace=' \n\t\r'var i,c;for(i=0;i<pd.length;i++) {c = pd.charAt(i);if(whiteSpace.indexOf(c)!=-1) {document.getElementById("pd2Error").innerHTML='<font color=red >密码不能包含空白字符</font>'document.getElementById("password2").focus()return false}}document.getElementById("pd2Error").innerHTML=''//判断password1和password2是否相等var pd1 = document.getElementById("password1").valuevar pd2 = document.getElementById("password2").valueif(pd1 != pd2) {document.getElementById("pd2Error").innerHTML='<font color=red >前后两次密码不符合</font>'document.getElementById("password2").focus()return false;}document.getElementById("pd2Error").innerHTML=''return true;}

js代码保存为checkdata.js放在html文件目录的下级script目录下就可以运行了。