ASP.NET MVC Jquery Validate 表单验证的多种方式
1.普通的表单结合 Jquery.Validate 的验证方式
以验证用户名、年龄、邮编为例。html表单如下
复制代码
1 <form id="addForm" method="post" action="/JQValidate/AddForm">
2 <p>
3 姓名：
4 <input type="text" name="txtName" id="txtName" />
5 <span class="errorMsg">错误信息放置的位置</span>
6 <br />
7 年龄：
8 <input type="text" name="txtAge" />
9 <span class="errorMsg"></span>
10 <br />
11 邮政编码：
12 <input type="text" name="txtZipCode" />
13 <span class="errorMsg"></span>
14 </p>
15 <p>
16 <input type="submit" value="提交" />
17 </p>
18 </form>
复制代码
Jquery.Validate JS 验证
复制代码
1 <script src="~/Scripts/jquery-1.7.1.js"></script>
2 <script src="~/Scripts/jquery.validate.js"></script>
3 <script type="text/javascript">
4 $(function () {
5 // 表单验证
6 formValidate();
7 });
8
9 var formValidate = function () {
10 // 添加自定义校验（邮政编码验证）
11 jQuery.validator.addMethod("isZipCode", function (value, element) {
12 var zipCode = /^[0-9]{6}$/;
13 return this.optional(element) || (zipCode.test(value));
14 }, "请正确填写您的邮政编码");
15
16 $("#addForm").validate({ // #JQForm是form表单的ID
17 rules: {
18 txtName: { // 要验证的表单的id
19 required: true, // 是否是必填项
20 minlength: 2, // 最小长度
21 remote: "/JQValidate/ValidateName",// 返回 true 就会出现错误信息
22 },
23 txtAge: {
24 required: true,
25 range: [18, 30]
26 },
27 txtZipCode: {
28 required: true,
29 isZipCode: true,
30 },
31 },
32 messages: {// 如果没有给属性错误提示，就会用默认提示
33 txtName: {
34 required: "请输入会员名称", // 如果提交的时候没有填写提示的文字
35 minlength: "会员名称的长度不能小于2位", // 如果输入的长度小于2提示的文字
36 remote: "用户名重复"
37 },
38 txtAge: {
39 required: "年龄不能为空",
40 range: "年龄范围是18~30"
41 },
42 txtZipCode: {
43 required: "邮政编码不能为空",
44 },
45 },
46 errorPlacement: function (error, element) { // 自定义错误信息放置的位置
47 error.appendTo(element.next("span"));
48 },
49 })
50 };
51 </script>
复制代码
2.添加自定义校验
以添加一个自定义的邮编为例
1 // 添加自定义校验（邮政编码验证）
2 jQuery.validator.addMethod("isZipCode", function (value, element) {
3 var zipCode= /^[0-9]{6}$/;
4 return this.optional(element) || (zipCode.test(value));
5 }, "请正确填写您的邮政编码");
3.把错误消息放到自定义的区域
有时候美工设计的静态页面我们开发人员为了保持其html结构不被改变，就要自定义错误信息的位置。如美工的html表单结构：
1 姓名：
2 <input type="text" name="txtName" id="txtName" />
3 <span class="errorMsg">错误信息放置的位置</span>
复制代码
1 $("#addForm").validate({ // #JQForm是form表单的ID
2 rules: {},
3 messages: {},
4 errorPlacement: function (error, element) { // 自定义错误信息放置的位置
5 error.appendTo(element.next("span"));
6 },
7 })
复制代码
4.远程校验
返回值为true 就提示错误信息，否则不提示
1 remote: "/JQValidate/ValidateName",// 返回 true 就会出现错误信息
注意如果不传参数，默认是把当前校验的值传到后台校验，如果还要传入其他参数通过这种形式（dataType必须是json类型）
复制代码
1 remote: { // 默认会把当前验证的值传到后台验证，如果还需要传输其他的参数在data中添加
2 url: "/JQValidate/ValidateName",
3 type: "post",
4 data: { "testData": "testName" },
5 dataType: "json", // 此处返回类型必须是JSON
6 }