使用jQuery用通用规则验证表单

Validating forms with common rules using jQuery

本文关键字：验证 表单 规则 jQuery 使用      更新时间：2023-09-26

我有多个表单，它们都有共同的字段(例如email)，每个表单都有独特的字段(例如，表格A上的uniqueFieldA，表格B上的uniqueFieldB)。

我想做的是:编写一组验证规则(使用jQuery验证插件)为公共字段一次，并"包含"这些规则在多个地方(每个表单)，然后添加在该特定表单的唯一规则。

像这样:

简化HTML: 

<form id="formA">
  <input name="email" />
  <input name="uniqueFieldA" />
</form>
<form id="formB">
  <input name="email" />
  <input name="uniqueFieldB" />
</form>

JS: 

// Define rules common to all forms
var commonRules = { 
  email: {
    required: true,
    email: true
  },
}
// Define rules for form A
$("#formA").validate({
   rules: {
     commonRules, //"include" common rules
     uniqueFieldA: "required" //rule unique to this form
   }
})
// Define rules for form B
$("#formB").validate({
   rules: {
     commonRules, //"include" common rules
     uniqueFieldB: "required" //rule unique to this form
   }
})

如何实现这一点(假设使用了完整、正确的HTML)?

由于这不是语法上有效的JavaScript (JSLint可以告诉你)，不，它将不起作用

$.extend在这里是你的朋友。试试这个(未测试):

// Define rules common to all forms
var commonRules = { 
  email: {
    required: true,
    email: true
  },
};
// Define rules for form A
$("#formA").validate({
   rules:  $.extend({
     uniqueFieldA: "required"
   }, commonRules)
});
// Define rules for form B
$("#formB").validate({
   rules: $.extend({
     uniqueFieldB: "required"
   }, commonRules)
});

如果公共规则和特定于表单的规则有任何重叠，您可能需要执行递归合并("深度扩展")。

相关文章：