<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script language="JavaScript" type="text/JavaScript" src="../js/jquery-1.11.3.js"></script>
<script language="JavaScript" type="text/JavaScript" src="../js/jquery.validate.min.js"></script>
<script language="JavaScript" type="text/JavaScript" src="../js/jquery.metadata.js"></script>
<script language="JavaScript" type="text/JavaScript" src="../js/messages_no.js"></script>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.css" rel="stylesheet">
<script>
$().ready(function() {
//身份证号验证
jQuery.validator.addMethod("idcard_verify", function(value, element) {
var idcard = /^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/;
return this.optional(element) || (idcard.test(value));
}, "请输入正确格式的身份证号！");
$("#signupForm").validate({
rules:{
firstname:"required",
email:{
required:true,
email:true
},
idcard:{
required:true,
idcard_verify:true
},
password:{
required:true,
minlength:5
},
confirm_password:{
required:true,
minlength:5,
equalTo:"#password"
}
},
messages:{
firstname:"请输入用户名",
idcard:{
required:"请输入身份证号码",
idcard:"请输入正确的身份证"
},
email:{
required:"请输入email地址",
email:"请输入正确的email地址"
},
password:{
required:"请输入密码",
minlength:jQuery.format("密码不能小于{0}个字符")
},
confirm_password:{
required:"请输入确认密码",
minlength:"确认密码不能小于5个字符",
equalTo:"两次输入的密码不一致"
}
}
});
});</script>
</head>
<body>
<div>
<form id="signupForm" method="get" action="">
<div class="form-group">
<label for="firstname" class="col-sm-2">Firstname</label>
<div class="col-sm-10"><input id="firstname" name="firstname" class="" /></div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2">E-Mail</label>
<div class="col-sm-10"><input id="" name="email" class="email" /></div>
</div>
<div class="form-group">
<label for="idcard" class="col-sm-2">身份证</label>
<div class="col-sm-10"><input id="" name="idcard" class="idcard" /></div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2">Password</label>
<div class="col-sm-10"><input id="password" name="password" type="password" class="" /></div>
</div>
<div class="form-group">
<label for="confirm_password" class="col-sm-2">确认密码</label>
<div class="col-sm-10"><input id="confirm_password" name="confirm_password" type="password" class="" /></div>
</div>
<div class="form-group">
<input class="submit" type="submit" value="Submit"/>
</div> </form>
</div>
</body>
比如在点击提交按钮submit时才验证，能不能设置在input 失去光标时做验证？
验证的触发方式修改
下面的虽然是boolean型的，但建议除非要改为false,否则别乱添加。
onsubmit：Boolean Default: true
提交时验证. 设置唯false就用其他方法去验证
onfocusout：Boolean Default: true
失去焦点是验证(不包括checkboxes/radio buttons)
onkeyup：Boolean Default: true
在keyup时验证.
onclick：Boolean Default: true
在checkboxes 和 radio 点击时验证
focusInvalid：Boolean Default: true
提交表单后，未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点
focusCleanup：Boolean Default: false
如果是true那么当未通过验证的元素获得焦点时，移除错误提示。
你可以试试validate-js
blur~~