JQuery-validate表单验证
仲皓君
使用场景
注册、修改密码、收集用户数据等
自定义JQuery-validate验证方法
jQuery.validator.addMethod(name,method,message)
参数 name 是添加的方法的名字。
参数 method 是一个函数，接收三个参数 (value,element,param) ；value 是元素的值，element 是元素本身，param 是方法的参数。
参数 message是提示信息
提交表单需要先调用校验方法
$("#registForm").valid()
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery校验表单</title>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="./js/jquery.validate.min.js"></script>
</head>
<body>
<div style="margin-top: 20px">
<form id="registForm" name="registForm" style="text-align: center">
<table border="0" cellpadding="1" cellspacing="1">
<tr>
<th colspan="2" style="font-size: 30px">注册</th>
</tr>
<tr>
<th align="right">手机号</th>
<td align="left"><input id="inPhone" name="inPhone" type="text" placeholder="请输入您的手机号"/>
</tr>
<tr>
<th align="right">密码</th>
<td align="left"><input id="passWord" name="passWord" type="password" placeholder="8-24位密码，字母、数字、下划线至少包含两种"/></td>
</tr>
<tr>
<th align="right">确认密码</th>
<td align="left"><input id="cfmPassWord" name="cfmPassWord" type="password" placeholder="请再次输入密码"/></td>
</tr>
<tr>
<tr>
<td id="submit" colspan="2" style="font-size: 20px"><a href="javascript:;">注册</a></td>
</tr>
</table>
</form>
</div>
<script type="text/javascript">
//提交
$('#submit').click(function(){
if(!$("#registForm").valid()) {
return false;
}
alert("验证通过")
});
$("#registForm").validate({
errorElement: "em", // 错误提示的标签名称
rules: {
inPhone: {
required: true,
minlength: 11,
isMobile: true
},
passWord: {
required: true,
rangelength:[8,24],
isRightfulString: true
},
cfmPassWord: {
required: true,
equalTo: "#passWord",
// isRightfulString: [10,20],
isRightfulString: true
}
},
messages: { //提示信息
inPhone: {
required: "请输入手机号",
minlength: "长度为11位",
},
passWord: {
required: "请输入密码",
rangelength: "密码长度为8~24位",
},
cfmPassWord: {
required: "请再次输入密码",
equalTo: "两次输入的密码不一致"
}
}
});
//验证字符串
jQuery.validator.addMethod(
"isRightfulString", //在“rules” 中添加的方法
function(value, element,param) {
console.info("value="+value) // 输入的元素值-此处为输入密码
console.info("element="+element) // 元素本身
console.info("param="+param) // 方法的参数-其实就是“rules”中添加的方法的值，用户可以随意定义，然后作出判断；此处我定义为true, 此时默认调用该自定义方法，如果设置为false，则不会调用；
//字母、数字、下划线，至少包含两种，长度为8到24位
var passWd = /^(?![0-9]+$)(?![a-zA-Z]+$)(?![_]+$)[0-9A-Za-z_]{8,24}$/;
return this.optional(element) || (passWd.test(value));
},
"请输入8-24位密码，字母、数字、下划线至少包含两种");
// 手机号码验证
jQuery.validator.addMethod(
"isMobile",
function(value, element) {
var length = value.length;
var mobile = /(^1[3456789][0-9]{9}$)/;
return this.optional(element) || (length == 11 && mobile.test(value));
},
"请正确填写您的手机号码");
</script>
<style type="text/css">
em {
position: relative;
top: 2px;
font-style: normal;
margin: 0 10px 0 0;
color: #ff0000;
}
input{
width: 300px;
}
</style>
</body>
</html>
类似资料：