1、form表单验证
<!DOCTYPE html> |
|
<html> |
|
<headlang="en"> |
|
<metacharset="UTF-8"> |
|
<title>验证框架的使用</title> |
|
|
|
<styletype="text/CSS"> |
|
.error{ |
|
color:red; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<formaction="success.html"method="post"id="myForm"> |
|
用户名:<inputname="userName"> <br/> |
|
密码:<inputname="password"type="password"id="pwd"> <br/> |
|
确认密码:<inputname="repPassword"type="password" > <br/> |
|
邮箱:<inputname="email"> <br/> |
|
手机号:<inputname="phone"> <br/> |
|
性别:<inputname="sex"type="radio"value="男"checked>男 |
|
<inputname="sex"type="radio"value="女">女<br/> |
|
是否同意协议<inputtype="checkbox"name="context"><br/> |
|
<buttontype="submit">注册</button> |
|
</form> |
|
|
|
|
|
--> |
|
<scripttype="text/javascript"src="../js/jquery-1.8.3.js"></script> |
|
<scripttype="text/javascript"src="../js/jquery.validate.js"></script> |
|
<scripttype="text/javascript"> |
|
$(function(){ |
|
//form表单的验证事件 |
|
$("#myForm").validate({ |
|
//验证规则 需要对哪些元素做验证 |
|
rules:{ |
|
userName:{ |
|
required:true |
|
}, |
|
password:{ |
|
required:true, |
|
minlength:6, |
|
maxlength:10 |
|
}, |
|
repPassword:{ |
|
required:true, |
|
minlength:6, |
|
maxlength:10, |
|
equalTo:"#pwd" |
|
}, |
|
email:{ |
|
required:true, |
|
email:true |
|
}, |
|
phone:{ |
|
required:true, |
|
checkPhone:true//自己书写的手机验证正则 |
|
}, |
|
context:{ |
|
required:true |
|
} |
|
},//rules end |
|
//不符合验证规则的错误信息 |
|
messages:{ |
|
userName:{ |
|
required:"请输入用户名" |
|
}, |
|
password:{ |
|
required:"请输入密码", |
|
minlength:"密码长度不能少于6位", |
|
maxlength:"密码长度不能大于10位" |
|
}, |
|
repPassword:{ |
|
required:"请输入密码", |
|
minlength:"密码长度不能少于6位", |
|
maxlength:"密码长度不能大于10位", |
|
equalTo:"两次密码输入不一致" |
|
}, |
|
email:{ |
|
required:"请输入邮箱", |
|
email:"邮箱格式不正确" |
|
}, |
|
phone:{ |
|
required:"请输入手机号", |
|
checkPhone:"电话号码格式不正确"//自己书写的手机验证正则 |
|
}, |
|
context:{ |
|
required:"您没有同意协议" |
|
} |
|
},// messages end |
|
//鼠标失去焦点立即验证 |
|
onfocusout:function(element){ |
|
$(element).valid(); |
|
} |
|
});// end validate |
|
|
|
//增加了手机验证正则 |
|
jQuery.validator.addMethod("checkPhone",function(value,element){ |
|
var tel= /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/ |
|
returnthis.optional(element)|| (tel.test(value)); |
|
},"电话号码格式不正确") |
|
|
|
|
|
}) |
|
|
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
</body> |
|
</html> |
来源: http://www.bubuko.com/infodetail-2380754.html