如何以最简洁方式为jQuery Validate多个字段设置同一验证规则？

你的问题很典型——重复写相同的规则确实冗余，咱们来看看几种不用繁琐循环（或者用极简的ES6语法）的简洁实现方式：

方案1：利用HTML类名自动绑定规则（最简洁！） #

jQuery Validate支持通过HTML元素的class属性直接绑定验证规则，完全不用在JS里写rules配置：

修改后的HTML #

<form id="myform">
  <div>
    <label for="firstname">First Name</label>
    <input type="text" id="firstname" name="firstname" class="required">
  </div>
  <div>
    <label for="middlename">Middle Name</label>
    <input type="text" id="middlename" name="middlename" class="required">
  </div>
  <div>
    <label for="lastname">Last Name</label>
    <input type="text" id="lastname" name="lastname" class="required">
  </div>
  <input type="submit" value="Search">
</form>

简化后的JS #

$("#myform").validate({ 
  messages: { 
    firstname: "Please fill in first name", 
    middlename: "Please fill in middle name", 
    lastname: "Please fill in last name" 
  } 
});

原理：jQuery Validate会自动识别带有required类的表单字段，自动为它们添加required验证规则，省掉了所有重复的规则配置。

方案2：用ES6的Object.fromEntries生成规则对象 #

如果不想修改HTML，想用JS来生成规则对象，可以用ES6的Object.fromEntries快速将字段数组转成规则键值对：

// 定义需要验证的字段数组
const requiredFields = ['firstname', 'middlename', 'lastname'];

$("#myform").validate({ 
  // 一行生成所有required规则
  rules: Object.fromEntries(requiredFields.map(field => [field, "required"])),
  messages: { 
    firstname: "Please fill in first name", 
    middlename: "Please fill in middle name", 
    lastname: "Please fill in last name" 
  } 
});

这里requiredFields.map(field => [field, "required"])会把数组转成[["firstname", "required"], ["middlename", "required"], ...]的格式，再通过Object.fromEntries转成规则需要的对象结构。

为什么你之前的写法无效？ #

你尝试的var names = {firstname, middlename, lastname};其实是ES6的对象简写（等价于{firstname: firstname, ...}），但后面rules: { names: "required" }的问题在于：jQuery Validate会把names当成一个单独的字段名，而不是你期望的三个字段，自然不会生效。

内容的提问来源于stack exchange，提问作者one-hand-octopus