前些天使用Jquery.validate插件时遇到这么一个难题:在修改密码的弹出层中使用验证但又不能影响页面上其他区域的验证。翻阅了很多文档(包括官方的)都没有解决方案,现有的解决方案都是解决已知要验证的多个区域,这样的解决方案可看这篇文章(http://www.cnblogs.com/Cheese_Ren/archive/2009/04/30/1447166.html)。但是遇到弹出层里要验证,同时不破坏未知的底层页的验证上面的方法就解决不了(这也是因为asp.net整个页面只有一个form表单造成的)。
我这里提供的方案实际上是个取巧的方法:先将form表单旧的验证规则另存到一个对象中,然后验证当前需要验证的控件,最后在把验证规则替换成第一步中保存好的对象。比如说:网站右上角有个修改密码功能,点击之后是弹出层,里面是输入新密码,用户可以不修改密码直接关闭这个层做别的动作,这时不能影响原有页面的验证。那么可以使用如下的代码:
1 var newSetting = {
2 rules: {
3 txtOldPWD: { required: true },
4 txtNewPWD: { required: true },
5 txtNewPWD2: { required: true }
6 },
7
8 messages: {
9 txtOldPWD: { required: "请输入原密码" },
10 txtNewPWD: { required: "请输入新密码" },
11 txtNewPWD2: { required: "请输入新密码" }
12 }
13 };
14
15 var validator = $('form').validate();
16 var oldSet = { messages: validator.settings.messages, rules: validator.settings.rules };
17 $.extend(validator.settings, newSetting);
18
19 var valid = validator.form();
20 $.extend(validator.settings, oldSet);
21 if (!valid)
22 return false;
由于js中对象是引用类型因此不能直接把$('form').validate()放到变量中,否则后面新规则会一起把该变量的值修改,我这里使用var oldSet = { messages: validator.settings.messages, rules: validator.settings.rules };这样的方式确保创建的是一个新对象。20行代码则是把验证规则替换回去以便保持旧页面验证规则。
上面这段JS应该是在弹出层的提交按钮的click事件中执行才对。