基础的表单验证:
<!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=utf-8" /> <title>表单验证</title> <script> function checkName(){ var realname=document.all.realname.value; var reg=/^[\u4e00-\u9fa5]{2,5}$/; if(!reg.test(realname)){ alert("用户实名要求2-5个汉字,请返回重新输入!"); return false;} else{ return true;} } function checkPassword(){ var password=document.all.password.value; var reg=/^\w{4,6}$/; if(!reg.test(password)){ alert("密码4-10个字符,请重新输入!"); return false;} else{ return true;} } function checkpassword(){ var repassword=document.all.repassword.value; var reg=/^[\u4e00-\u9fa5]{2,5}$/; if(!repassword==password){ alert("请确认密码一致!"); return false;} else{ return true;} } function checkidcard(){ var idcard=document.all.idcard.value; var reg=/^\d{17}(\d|x|X)$/; if(!reg.test(idcard)){ alert("确认身份证号格式!"); return false;} else{ return true;} } function checkphone(){ var phone=document.all.phone.value; var reg=/^1\d{10}$/; if(!reg.test(phone)){ alert("输入11位数的电话号码,开头为1!"); return false;} else{ return true;} } function checkadd(){ var emailadd=document.all.emailadd.value; var reg=/^\w+((-\w+)|(\.\w+))*\@[a-zA-Z0-9]+((\.|-)[a-zA-Z0-9])*\.[a-zA-Z0-9]+$/; if(!reg.test(emailadd)){ alert("邮箱格式错误,请重新输入!"); return false;} else{ return true;} } function checknum(){ var num=document.all.num.value; var reg=/^\d{6}$/; if(!reg.test(num)){ alert("六个数字,请返回重新输入!"); return false;} else{ return true;} } function checkbirth(){ var birthday=document.all.birthday.value; var reg=/^(19\d{2}|200[0-9])-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|30|31)$/; if(!reg.test(birthday)){ alert("请输入正确格式生日日期!"); return false;} else{ return true;} } function checkAll(){ if(checkName()&&checkPassword()&&checkpassword()&&checkidcard()&&checkphone()&&checkadd()&&checknum()&&checkbirth()){ if(confirm("确认提交注册信息么?")){ alert("注册成功"); return true; }else{ alert("您取消了注册!"); return false; } }else{ alert("验证未通过,请重新填写"); return false; } } </script> </head> <body> <table width="500" border="1"> <tr> <td>用户名:</td> <td><label for="textfield"></label> <input type="text" name="realname" id="realname" onblur="checkName()" /> 必须由2--5个汉字组成</td> </tr> <tr> <td>登录密码:</td> <td><label for="textfield2"></label> <input type="text" name="password" id="password" onblur="checkPassword()" /> 4-10个字符</td> </tr> <tr> <td>确认密码:</td> <td><label for="textfield3"></label> <input type="text" name="repassword" id="repassword" onblur="checkpassword()"/> 4-10个字符,与登录密码相同</td> </tr> <tr> <td>身份证号码:</td> <td><label for="textfield3"></label> <input type="text" name="idcard" id="idcard" onblur="checkidcard()"/> 前17位由数字组成</td> </tr> <tr> <td>手机号码:</td> <td><label for="textfield3"></label> <input type="text" name="phone" id="phone" onblur="checkphone()"/> 以1开头,11位数</td> </tr> <tr> <td>邮件地址:</td> <td><label for="textfield2"></label> <input type="text" name="emailadd" id="emailadd" onblur="checkadd()" /> 必须包含@和.符号</td> </tr> <tr> <td>邮政编码:</td> <td><label for="textfield3"></label> <input type="text" name="num" id="num" onblur="checknum()"/> 六位数</td> </tr> <tr> <td>出生日期:</td> <td><label for="textfield3"></label> <input type="text" name="birthday" id="birthday" onblur="checkbirth()"/> 1999-2000年之间,格式1998-09-06</td> </tr> <tr> <td colspan="2"><input name="" type="button" value="立即注册" onclick="checkAll()"/></td> </tr> </table> </body> </html>