ASP.NET MVC Jquery Validate 表单验证的多种方式

一、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  }