在我们日常开发过程中，前端的表单验证很重要，如果这块处理不当，会出现很多bug 。但是如果处理的好，不仅bug会很少，用户体验也会得到很大的提升。在开发过程中我们可以不借助 JS 库，自己去手写 JS 验证，但是如果是团队项目，为了达到代码的统一还是调用统一的 表单验证方式 比较合适。下面介绍在 ASP.NET MVC中结合Jquery Validate 进行表单验证的方式。首先推荐一篇关于Jquery Validate 如何使用的博文，写的很详细。http://www.cnblogs.com/hejunrex/archive/2011/11/17 /2252193.html。而我将要介绍的是如何结合Jquery Validate 进行表单验证。
一、Jquery.Validate 中的用法概述以及重要的用法
1.普通的表单结合 Jquery.Validate 的验证方式
以验证用户名、年龄、邮编为例。html表单如下
view sourceprint?
免费热线：400-683-0016
扫二维码关注公众号
当前位置：01.1 <form id="addForm" method="post" action="/JQValidate/AddForm">
02.2 <div>
03.3 姓名：
04.4 <input type="text" name="txtName" id="txtName" />
05.5 <span class="errorMsg">错误信息放置的位置</span>
06.6 <br />
07.7 年龄：
08.8 <input type="text" name="txtAge" />
09.9 <span class="errorMsg"></span>
10.10 <br />
11.11 邮政编码：
12.12 <input type="text" name="txtZipCode" />
13.13 <span class="errorMsg"></span>
14.14 </div>
15.15 <div>
16.16 <input type="submit" value="提交" />
17.17 </div>
18.18 </form>
Jquery.Validate JS 验证
view sourceprint?01.1 <script src="~/Scripts/jquery-1.7.1.js"></script>
02.2 <script src="~/Scripts/jquery.validate.js"></script>
03.3 <script type="text/javascript">
04.4 $(function () {
05.5 // 表单验证
06.6 formValidate();
07.7 });
08.8
09.9 var formValidate = function () {
10.10 // 添加自定义校验（邮政编码验证）
11.11 jQuery.validator.addMethod("isZipCode", function (value, element) {
12.12 var zipCode = /^[0-9]{6}$/;
13.13 return this.optional(element) || (zipCode.test(value));
14.14 }, "请正确填写您的邮政编码");
15.15
16.16 $("#addForm").validate({ // #JQForm是form表单的ID
17.17 rules: {
18.18 txtName: { // 要验证的表单的id
19.19 required: true, // 是否是必填项
20.20 minlength: 2, // 最小长度
21.21 remote: "/JQValidate/ValidateName",// 返回 true 就会出现错误信息
22.22 },
23.23 txtAge: {
24.24 required: true,
25.25 range: [18, 30]
26.26 },
27.27 txtZipCode: {
28.28 required: true,
29.29 isZipCode: true,
30.30 },
31.31 },
32.32 messages: {// 如果没有给属性错误提示，就会用默认提示
33.33 txtName: {
34.34 required: "请输入会员名称", // 如果提交的时候没有填写提示的文字
35.35 minlength: "会员名称的长度不能小于2位", // 如果输入的长度小于2提示的文字
36.36 remote: "用户名重复"
37.37 },
38.38 txtAge: {
39.39 required: "年龄不能为空",
40.40 range: "年龄范围是18~30"
41.41 },
42.42 txtZipCode: {
43.43 required: "邮政编码不能为空",
44.44 },
45.45 },
46.46 errorPlacement: function (error, element) { // 自定义错误信息放置的位置
47.47 error.appendTo(element.next("span"));
48.48 },
49.49 })
50.50 };
51.51 </script>
2.添加自定义校验
以添加一个自定义的邮编为例
view sourceprint?1.1 // 添加自定义校验（邮政编码验证）
2.2 jQuery.validator.addMethod("isZipCode", function (value, element) {
3.3 var zipCode= /^[0-9]{6}$/;
4.4 return this.optional(element) || (zipCode.test(value));
5.5 }, "请正确填写您的邮政编码");
3.把错误消息放到自定义的区域
有时候美工设计的静态页面我们开发人员为了保持其html结构不被改变，就要自定义错误信息的位置。如美工的html表单结构：
view sourceprint?1.1 姓名：
2.2 <input type="text" name="txtName" id="txtName" />
3.3 <span class="errorMsg">错误信息放置的位置</span>
view sourceprint?
1.1 $("#addForm").validate({ // #JQForm是form表单的ID
2.2 rules: {},
3.3 messages: {},
4.4 errorPlacement: function (error, element) { // 自定义错误信息放置的位置
5.5 error.appendTo(element.next("span"));
6.6 },
7.7 })
4.远程校验
返回值为true 就提示错误信息，否则不提示
view sourceprint?1.1 remote: "/JQValidate/ValidateName",// 返回 true 就会出现错误信息
注意如果不传参数，默认是把当前校验的值传到后台校验，如果还要传入其他参数通过这种形式（dataType必须是json类型）
view sourceprint?1.1 remote: { // 默认会把当前验证的值传到后台验证，如果还需要传输其他的参数在data中添加
2.2 url: "/JQValidate/ValidateName",
3.3 type: "post",
4.4 data: { "testData": "testName" },
5.5 dataType: "json", // 此处返回类型必须是JSON
6.6 }
二、Jquery.Validate 结合Ajax.BeginForm 验证方式，实现验证成功后的异步提交表单
1.引入 JS
view sourceprint?1.1 <script src="~/Scripts/jquery-1.7.1.js"></script>
2.2 @*Ajax.BeginForm 需要的js 文件*@
3.3 <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
4.4 <script src="~/Scripts/jquery.validate.js"></script>
2.
普通的表单结合Jquery.Validate提交方式是非异步的，用Jquery.Validate 结合Ajax.BeginForn 验证方 式，实现验证成功后的异步提交表单。如果让Jquery.Validate去验证表单就必须用<form></form>包裹， 也就必须获取到<form></form>的id。如果没有设置要提交的表单id运行后查看网页源代码我们会发现ASP.NET MVC 默认会给我们分配一个form id,查看源文件如图
如果我们通过id=“form0”去验证也可以，但是如果一个页面不止一个表单就很难分清要验证哪个form表单了。我们看下Ajax.BeginForm的参数重载是可以设置form表单的属性的。如图
所以表单改成如下方式就行了（最后一个参数加上 new { @id = "AddForm" }）
view sourceprint?01.1 @using (Ajax.BeginForm("AddForm", "JQValidate", new { }, new AjaxOptions() { HttpMethod = "post", OnBegin = "ajaxFormOnBegin", OnSuccess = "afterOnSuccess", OnFailure = "afterOnFailure", UpdateTargetId = "UpdateTargetHiddenID" }, new { @id = "AddForm" }))
02.2 {
03.3 <div>
04.4 姓名：
05.5 <input type="text" name="txtName" id="txtName" />
06.6 <span class="errorMsg">错误信息放置的位置</span>
07.7 <br />
08.8 年龄：
09.9 <input type="text" name="txtAge" />
10.10 <span class="errorMsg"></span>
11.11 <br />
12.12 邮政编码：
13.13 <input type="text" name="txtZipCode" />
14.14 <span class="errorMsg"></span>
15.15 </div>
16.16 <div>
17.17 <input type="submit" value="提交" />
18.18 </div>
19.19 }
三、Jquery.Validate 结合 非 form 表单提交的验证方式
有时候页面上不仅是表单数据，也有表格等其他数据，而不想通过form表单都提交到后台，但是又想通过Jquery.Validate方式验证。那么我们可以这样做。
表单：
view sourceprint?01.1 <form>
02.2 <div>
03.3 姓名：
04.4 <input type="text" name="txtName" id="txtName" />
05.5 <span class="errorMsg">错误信息放置的位置</span>
06.6 <br />
07.7 年龄：
08.8 <input type="text" name="txtAge" />
09.9 <span class="errorMsg"></span>
10.10 <br />
11.11 邮政编码：
12.12 <input type="text" name="txtZipCode" />
13.13 <span class="errorMsg"></span>
14.14 </div>
15.15 <div>
16.16 <input type="button" value="提交" onclick="javascript： btnSubmit();" />
17.17 </div>
18.18 </form>
Jquery.Validate 中有一个方法是valid()，是用来判断表单是否验证通过的，同时会进行校验是否合法。
Jquery.Validate验证：
view sourceprint?01.1 <script type="text/javascript">
02.2 $(function () {
03.3 // 表单验证
04.4 formValidate();
05.5 });
06.6
07.7 var formValidate = function () {
08.8 // 添加自定义校验（邮政编码验证）
09.9 jQuery.validator.addMethod("isZipCode", function (value, element) {
10.10 var zipCode = /^[0-9]{6}$/;
11.11 return this.optional(element) || (zipCode.test(value));
12.12 }, "请正确填写您的邮政编码");
13.13
14.14 $("#addForm").validate({ // #JQForm是form表单的ID
15.15 rules: {
16.16 txtName: { // 要验证的表单的id
17.17 required: true, // 是否是必填项
18.18 minlength: 2, // 最小长度
19.19 remote: "/JQValidate/ValidateName",// 返回 true 就会出现错误信息
20.20 },
21.21 txtAge: {
22.22 required: true,
23.23 range: [18, 30]
24.24 },
25.25 txtZipCode: {
26.26 required: true,
27.27 isZipCode: true,
28.28 },
29.29 },
30.30 messages: {// 如果没有给属性错误提示，就会用默认提示
31.31 txtName: {
32.32 required: "请输入会员名称", // 如果提交的时候没有填写提示的文字
33.33 minlength: "会员名称的长度不能小于2位", // 如果输入的长度小于2提示的文字
34.34 remote: "用户名重复"
35.35 },
36.36 txtAge: {
37.37 required: "年龄不能为空",
38.38 range: "年龄范围是18~30"
39.39 },
40.40 txtZipCode: {
41.41 required: "邮政编码不能为空",
42.42 },
43.43 },
44.44 errorPlacement: function (error, element) { // 自定义错误信息放置的位置
45.45 error.appendTo(element.next("span"));
46.46 },
47.47 })
48.48 };
49.49 </script>
Jquery.Validate验证是否通过，通过就往后台提交数据，没有通过会出现错误提示：
view sourceprint?01.1 // 非submit按钮提交方式
02.2 var btnSubmit = function () {
03.3 // 检测表单是否验证通过 并进行表单验证
04.4 var validateState = $("#addForm").valid();
05.5 if (!validateState) {
06.6 return false;
07.7 }
08.8
09.9 // 往后台提交数据，当然还可以传入其他你想提交的数据
10.10 $.ajax({
11.11 url: "/JQValidate/AddForm",
12.12 type: "post",
13.13 dataType: "text",
14.14 data:{txtName:$("#txtName").val()},
15.15 success: function (data) {
16.16 alert(data);
17.17 }
18.18 });
19.19
20.20 };
总结
通过以上这几种结合Jquery.Validate表单验证提交方式，应该可以覆盖到我们日常开发过程中的表单验证方式，如果你还有更好的方式不妨大家一起交流分享。
下一篇博客将是介绍ASP.NET MVC 通过 Model 表单验证方式。
版权说明：Copyright © 广州京杭网络科技有限公司 2005-2025 版权所有 粤ICP备16019765号
广州京杭网络科技有限公司 版权所有
