JQuery Validate (表单验证)
JQuery Validate
下面展示一些我的test代码。
// html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript"
src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script type="text/javascript" src="jquery-validation-1.19.2/dist/jquery.validate.js"></script>
<!--引入中文提示包,注意顺序-->
<script type="text/javascript" src="jquery-validation-1.19.2/src/localization/messages_zh.js"></script>
</head>
<body>
<form action="#" id="userForm" method="post">
用户名:<input type="text" name="name" id="name" required max="150">
<br>是否必填:<input type="checkbox" name="flag" id="flag">
密码:<input type="password" name="pwd" id="pwd">
<br><input type="submit" value="提交">
错误将在这显示:<span id="errorSpan"></span>
</form>
</body>
</html>
// js
<script>
/*可以设置 validate 的默认值,覆盖验证规则 注意位置*/
$.validator.methods.email = function (value, element) {
return this.optional(element) || /[a-z]+@[a-z]+\.[a-z]+/.test(value);
}
$.validator.setDefaults({
submitHandler: function (form) { alert("提交事件!"); form.submit(); }
});
var $userForm = $("#userForm");
$userForm.validate({
// 设置里debug参数,即使验证通过了(为 true)也不会提交表单。
debug: false,
errorPlacement: function (error, element) {
//error.appendTo(element.parent());//这是默认的,就像前几个图显示的,直接追加到该控件的后面
error.appendTo($("#errorSpan"))
},
rules: {
name: {
required: function () {
return $("#flag").prop("checked");
},
max: 150
},
pwd: {
required: "请输入密码",
minlength: 5,
}
},
/*将校验规则写到 js 代码中,没写显示默认的*/
messages: {
password: {
required: "请输入密码",
minlength: "密码长度不能小于 5 个字符"
},
// confirm_password: {
// required: "请输入密码",
// minlength: "密码长度不能小于 5 个字符",
// equalTo: "两次密码输入不一致"
// },s
},
submitHandler:function(form){
alert("提交事件!");
form.submit();
}
});
</script>
参考链接: https://blog.csdn.net/wangxiaoan1234/article/details/77466720