jQuery Validation学习总结
在应用jQuery Validate前，最好是要引入jquery.metadata.js，它是一个支持固定格式解析的jQuery插件，Validation插件将其很好的融合到验证规则编码中。
实现Validation需要引用的插件有：
<script src="../jQuery/jquery-3.5.1.js" type="text/javascript"></script>
<script src="../jQuery/jquery.validate.js" type="text/javascript"></script> //验证
<script src="../jQuery/messages_zh.js" type="text/javascript"></script> //汉化
<script src="../jQuery/jquery.metadata.js" type="text/javascript"></script> //固定格式
将相关的验证信息写入到class中：
注意1：input 最好要设置 id 和 name 属性；
注意2：load方法中写入 $("#comment").validate({ meta: “validate” });
注意3：class中messages属性不设置的话将弹出默认的信息提示
注意4：校验规则和例子如下：
| 属性 | 解释 |
|---|---|
| required:true | 必输字段 |
| remote:“remote-valid.jsp” | 使用ajax方法调用remote-valid.jsp验证输入值 |
| email:true | 必须输入正确格式的电子邮件 |
| url:true | 必须输入正确格式的网址 |
| date:true | 必须输入正确格式的日期，日期校验ie6出错，慎用 |
| dateISO:true | 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性 |
| creditcard:true | 必须输入合法的信用卡号 |
| equalTo:"#password" | 输入值必须和#password相同 |
| accept: | 输入拥有合法后缀名的字符串（上传文件的后缀） |
| maxlength:5 | 输入长度最多是5的字符串(汉字算一个字符) |
| minlength:10 | 输入长度最小是10的字符串(汉字算一个字符) |
| rangelength:[5,10] | 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符) |
| range:[5,10] | 输入值必须介于 5 和 10 之间 |
| max:5 | 输入值不能大于5 |
| min:10 | 输入值不能小于10 |
方法1：校验属性写到html的class中，验证行为与html结构并没有完全脱钩
<form id="comment" class="comment" method="GET" action="#">
<div>
<label for="userName">姓名</label>
<input type="text" id="userName" name="name"
class="{validate:{required:true,minlength:2,messages:{required:'必须填入',minlength:'输入长度不小于2'}}}">
</div>
<div>
<label for="userAge">年龄</label>
<input type="text" id="userAge" name="age"
class="{validate:{required:true,digits:true,messages:{digits:'必须输入整数'}}}">
</div>
<div>
<label for="confirm">确定</label>
<input type="text" id="confirm" name="confirm"
class="{validate:{required:true,equalTo:'#userAge',messages:{equalTo:'确定年龄不相符'}}}">
</div>
<div>
<label for="userEmail">邮件</label>
<input type="text" id="userEmail" name="email" class="{validate:{email:true}}">
</div>
<div>
<input class="submit" type="submit" value="提交" />
</div>
</form>
<script type="text/javascript">
$(function () {
$("#comment").validate({
meta: "validate" });
})
</script>
美化验证信息
默认情况下的错误信息提示为label，错误信息提示样式可以如下填写CSS即可：
label.error {
width: fit-content;
color: rebeccapurple;
font-style: italic;
font-size: smaller;
}
若要进一步美化验证交互，可以在validate中进一步如下编写：
<script type="text/javascript">
$(function () {
$("#comment").validate({
meta: "validate",
errorElement: "label",
success: function (label) {
$("<em style='color:green'> √ </em>").prependTo(label);
}
})
})
</script>
方法2：校验与HTML元素属性无直接关联，是用过name属性来关联字段和验证写法
<body>
<h2>This is a Create Page</h2>
<h4 id="content">UserInfo</h4>
<br />
<form class="form-horizontal" id="form-create" action="/UserInfo/CreateSubmit" method="post">
<div class="form-group col-md-10">
<label>UserName</label>
<input id="name" name="Name" type="text" placeholder="请输入用户名" class="form-control">
</div>
<div class="form-group col-md-10">
<label>Password</label>
<input id="password" name="Password" type="text" placeholder="请输入用户密码" class="form-control" />
</div>
<div class="form-group col-md-10">
<input id="submit" type="submit" value="Create" class="btn btn-default" />
</div>
</form>
<div>
<a href="/UserInfo/Index">Back to List</a>
</div>
<script type="text/javascript">
$(function () {
$("#form-create").validate({
meta: "validate",
rules: {
Name: {
required: true,
minlength: 2,
},
Password: {
required: true,
digits: true
}
},
messages: {
Name: {
required: "请输入姓名"
},
Password: {
required: "请输入密码"
}
},
elementError: "label",
success: function (label) {
label.text("√").addClass("success");
}
});
});
</script>
</body>
自定义验证方式
注意1：在load函数中，加入$.validator.addMethod方法，addMethod的三个参数分别是：自定义验证属性名称，自定义验证方法，错误提示；
注意2：自定义验证方法function(value,element,para),value为当前元素值；element为当前元素；para为参数值，参考例子中formula：10，则para=10；
注意3：this.optional(element) 表示判断当前元素值是否为空，若输入为空直接返回true，不需要验证
<div>
<label for="userCheck">10</label>
<input type="text" id="userCheck" name="check" class="{validate:{required:true,digits:true,formula:10}}">
</div>
<script type="text/javascript">
$(function () {
$.validator.addMethod("formula", function (value, element, para) {
return (this.optional(element) || value == para)
}, "算错");
$("#comment").validate({
meta: "validate" });
})
</script>
Validation + AJAX（例如判断用户名是否存在，若存在前台提示）
<html>
<head>
<script type="text/javascript" src="~/Scripts/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.validate.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.metadata.js"></script>
<script type="text/javascript" src="~/Scripts/messages_zh.js"></script>
</head>
<body>
<h2>This is a ajax validate test project</h2>
<h4>UserInfo</h4>
<hr/>
<form id="form" class="form-horizontal" method="post" action="/UserInfo/Create">
<div class="form-group">
<label class="control-label">UserName<font style="color:red">*</font> </label>
<input id="name" name="Name" type="text" placeholder="please input user name" class="form-control" />
<span id="nameError"></span>
</div>
<div class="form-group">
<label class="control-label">Password<font style="color:red">*</font></label>
<input id="password" name="Password" type="text" placeholder="please input password" class="form-control" />
<span id="passwordError"></span>
</div>
<div class="form-group">
<label class="control-label">Authority<font style="color:seagreen">*</font></label>
<select id="authority" name="Authority" class="form-control">
<option selected="selected" value="0">Normal User</option>
<option value="1">Administrator</option>
</select>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
<a class="btn btn-default" href="/UserInfo/Index">Go Back</a>
</div>
</form>
<script type="text/javascript">
$(function () {
$("#form").validate({
meta: "validate",
rules: {
Name: {
required: true,
minlength: 2,
isExist: true
},
Password: {
required: true
}
},
messages: {
Name: {
required: "please input user name"
}
},
errorElement: "label",
errorPlacement: function (error, element) {
element.next().append(error);
}
});
$.validator.addMethod("isExist", function (value, element) {
var result = false;
$.ajax({
url: "/UserInfo/IsUserExist",
type: "GET",
async: false,
dataType: "json",
data: {
Name: $("#name").val() },
success: function (data) {
result = data;
}
});
return this.optional(element) || result
},"name has already existed");
})
</script>
</body>
</html>
如果在ASP.NET MVC中 报Validate 没有这个方法 validate is not a function，注意删除_layout.cshtml中@Script.Render("~/bundles/jquery")，或者自己去AppStart中修改BundleConfig.cs文件
Happy Ending