基础的表单验证:
<!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>