<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>test</title>
<script src="jquery.js"></script>
<script src="jquery.validate.js"></script>
<script>
$(function () {
//添加自定义校验
function compare_num(value, element) {
var min_num = parseInt($("#min_num").val());
var max_num = parseInt($("#max_num").val());
if (!min_num || !max_num) {
return true;
}
return max_num > min_num;
}
jQuery.validator.addMethod("compare_num", compare_num, "最大值必须大于最小值");
//...
var validate = $("#myform").validate({
debug: true, //调试模式取消submit的默认提交功能
//errorClass: "label.error", //默认为错误的样式类为：error
focusInvalid: false, //当为false时，验证无效时，没有焦点响应
onkeyup: false,
submitHandler: function(form){ //表单提交句柄,为一回调函数，带一个参数：form
alert("提交表单");
form.submit(); //提交表单
},
//校验规则
rules:{
myname:{
required:true
},
password:{
required:true,
rangelength:[3,10]
},
confirm_password:{
equalTo:"#password"
},
min_num: {
required: true
},
max_num: {
compare_num: true, //自定义校验
},
}, //end rules
//校验提示信息
messages:{
myname:{
required:"必填"
},
password:{
required: "不能为空",
rangelength: $.format("密码最小长度:{0}, 最大长度:{1}。")
},
confirm_password:{
equalTo:"两次密码输入不一致"
},
min_num: {
required: "最小值不能为空"
},
} //end messages
}); //end validate
});
</script>
</head>
<body>
<form id="myform" method="post" action="">
<p>
<label for="myname">用户名：</label>
<input id="myname" name="myname" />
</p>
<p>
<label for="password">登陆密码：</label>
<input id="password" name="password" type="password"/>
</p>
<p>
<label for="confirm_password">确认密码：</label>
<input id="confirm_password" name="confirm_password" type="password"/>
</p>
<p>
<label for="min_num">最小值：</label>
<input id="min_num" name="min_num" type="text" />
</p>
<p>
<label for="max_num">最大值：</label>
<input id="max_num" name="max_num" type="text" />
</p>
<p>
<input class="submit" type="submit" value="提交" />
</p>
</form>
</body>
</html>
参考链接: http://www.cnblogs.com/linjiqin/p/3431835.html