jQuery证验框架（七）注意事项 (jQuery validation)

jQuery验证框架

七、注意事项

[1]复杂的name属性值
??? 当使用rules选项时，如果表单的name属性值包含有非法的javascript标识符，必须将name值加上引号。

Js代码

1. $("#myform").validate({ ??
2. ??rules:?{ ??
3. ????//?no?quoting?necessary ??
4. ????name:?"required", ??
5. ????//?quoting?necessary! ??
6. ????"user[email]":?"email", ??
7. ????//?dots?need?quoting,?too! ??
8. ????"user.address.street":?"required"??
9. ??} ??
10. });??

$("#myform").validate({
  rules: {
    // no quoting necessary
    name: "required",
    // quoting necessary!
    "user[email]": "email",
    // dots need quoting, too!
    "user.address.street": "required"
  }
});

[2]重构规则
??? 不论什么时候，当你的表单中的多个字段含有相同的验证规则及验证消息，重构规则可以减少很多重复。使用 addMethod 和 addClassRules 将非常有效果。??
??? 假使已经重构了如下规则：

Js代码

1. //?alias?required?to?cRequired?with?new?message ??
2. $.validator.addMethod("cRequired",?$.validator.methods.required, ??
3. ??"Customer?name?required"); ??
4. //?alias?minlength,?too ??
5. $.validator.addMethod("cMinlength",?$.validator.methods.minlength,? ??
6. ??//?leverage?parameter?replacement?for?minlength,?{0}?gets?replaced?with?2 ??
7. ??$.format("Customer?name?must?have?at?least?{0}?characters")); ??
8. //?combine?them?both,?including?the?parameter?for?minlength ??
9. $.validator.addClassRules("customer",?{?cRequired:?true,?cMinlength:?2?});??

// alias required to cRequired with new message
$.validator.addMethod("cRequired", $.validator.methods.required,
  "Customer name required");
// alias minlength, too
$.validator.addMethod("cMinlength", $.validator.methods.minlength, 
  // leverage parameter replacement for minlength, {0} gets replaced with 2
  $.format("Customer name must have at least {0} characters"));
// combine them both, including the parameter for minlength
$.validator.addClassRules("customer", { cRequired: true, cMinlength: 2 });

??? 那么使用的时候如下：

Html代码

1. <input?name="customer1"?class="customer"?/>??
2. <input?name="customer2"?class="customer"?/>??
3. <input?name="customer3"?class="customer"?/>??

<input name="customer1" class="customer" />
<input name="customer2" class="customer" />
<input name="customer3" class="customer" />

[3]验证消息
??? 当验证了一个无效的表单元素，验证消息显示在用户面前。这些消息是从哪里来的呢？有三个途径来取得验证消息。
??????? 1.通过待验证表单元素的title属性
??????? 2.通过默认的验证消息
??????? 3.通过插件设置(messages选项)
??? 这三种途径的优先顺序为：3 > 1 > 2
???
[4]验证消息与Google工具栏的冲突
??? 有时候验证消息会与Goole工具栏的AutoFill插件冲突。AutoFill通过替换表单元素的title属性，以显示提示消息。此时，验证消息如果获取的是title属性值，那么就得不到我们预期想要得到的结果。当文档载入时，可以通过如下方法避免冲突。

Js代码

1. $("input.remove_title").attr("title",?"");??

$("input.remove_title").attr("title", "");

[5]表单提交
??? 默认地，表单验证失败时阻止表单的提交，当验证通过，表单提交。当然，也可以通过submitHandler来自定义提交事件。
??? 将提交按钮的class属性设置成cancel，在表单提交时可以跳过验证。

Js代码

1. <input?type="submit"?name="submit"?value="Submit"?/> ??
2. <input?type="submit"?class="cancel"?name="cancel"?value="Cancel"?/>??

<input type="submit" name="submit" value="Submit" />
<input type="submit" class="cancel" name="cancel" value="Cancel" />

??? 下面这段代码将循环提交表单：

Java代码

1. $("#myform").validate({ ??
2. ?submitHandler:?function(form)?{ ??
3. ???//?some?other?code?maybe?disabling?submit?button ??
4. ???//?then: ??
5. ???$(form).submit(); ??
6. ?} ??
7. });??

$("#myform").validate({
 submitHandler: function(form) {
   // some other code maybe disabling submit button
   // then:
   $(form).submit();
 }
});

??? $(form).submit() 触发了另外一轮的验证，验证后又去调用submitHandler，然后就循环了。可以用 form.submit() 来触发原生的表单提交事件。

Java代码

1. $("#myform").validate({ ??
2. ?submitHandler:?function(form)?{ ??
3. ???form.submit(); ??
4. ?} ??
5. });??

$("#myform").validate({
 submitHandler: function(form) {
   form.submit();
 }
});

原文请见：http://docs.jquery.com/Plugins/Validation

----------------------------------------------------------------------