jQuery的驗證插件 - 增加了適用於多個領域的規則

Question

我用jQuery Validation插件：

我有一個大的形式，一些領域，我想同樣的規則適用於。我簡化了這個例子的代碼。此代碼不起作用，但我想要做這樣的事情。第二條規則應適用於first_name和last_name。我想在這個函數中封裝所有的規則，而不是編輯一些表單元素的類列表來添加一個必需的類或者其他東西。

（同樣，我有，我想組不同的要求的表單字段的幾個不同的基團。我只放required: true在該元件爲簡單起見）

$('#affiliate_signup').validate(
     { 
      rules: 
      { 
      email: { 
       required: true, 
       email: true 
      }, 
      first_name,last_name: { 
       required: true 
      }, 
      password: { 
       required: true, 
       minlength: 4 
      } 
      } 
     }); 

預先感謝。

Answer 1

對於我的示例的目的，這是基本的起始代碼：

HTML：

<input type="text" name="field_1" /> 
<input type="text" name="field_2" /> 
<input type="text" name="field_3" /> 

的jQuery：

$('#myForm').validate({ 
    rules: { 
     field_1: { 
      required: true, 
      number: true 
     }, 
     field_2: { 
      required: true, 
      number: true 
     }, 
     field_3: { 
      required: true, 
      number: true 
     } 
    } 
}); 

http://jsfiddle.net/9W3F7

---

選項1a）您可以提取規則組並將它們組合爲常用變量。

var ruleSet1 = { 
     required: true, 
     number: true 
    }; 

$('#myForm').validate({ 
    rules: { 
     field_1: ruleSet1, 
     field_2: ruleSet1, 
     field_3: ruleSet1 
    } 
}); 

http://jsfiddle.net/9W3F7/1

---

可能性1b）相關1A以上，但具體取決於您的複雜程度，可以分離出所共有的某些羣體的規則和使用.extend()重組他們無數種方式。

var ruleSet_default = { 
     required: true, 
     number: true 
    }; 

var ruleSet1 = { 
     max: 99 
    }; 
$.extend(ruleSet1, ruleSet_default); // combines defaults into set 1 

var ruleSet2 = { 
     min: 3 
    }; 
$.extend(ruleSet2, ruleSet_default); // combines defaults into set 2 

$('#myForm').validate({ 
    rules: { 
     field_1: ruleSet2, 
     field_2: ruleSet_default, 
     field_3: ruleSet1 
    } 
}); 

最終結果是：

• field_1將是一個需要數不低於3

• field_2將只是一個所需數量。

• field_3將是一個需要數不大於99

http://jsfiddle.net/9W3F7/2

---

選項2a）您可以根據所需的共同規則，然後分配類的領域將這些規則分配給類。使用addClassRules方法，我們正在使用複合規則並將它們轉換爲類名。

HTML：

<input type="text" name="field_1" class="num" /> 
<input type="text" name="field_2" class="num" /> 
<input type="text" name="field_3" class="num" /> 

的jQuery：

$('#myform').validate({ // initialize the plugin 
    // other options 
}); 

$.validator.addClassRules({ 
    num: { 
     required: true, 
     number: true 
    } 
}); 

http://jsfiddle.net/9W3F7/4/

---

選項2B）從選項2A的主要區別是，你可以用它來分配規則通過調用動態創建輸入元素在創建它們後立即使用方法rules('add')。你可能使用class作爲選擇器，但它不是必需的。正如您在下面看到的，我們使用了通配符選擇器而不是class。

的.rules()方法必須被調用的任何時間調用.validate()之後。

的jQuery：

$('#myForm').validate({ 
    // your other plugin options 
}); 

$('[name*="field"]').each(function() { 
    $(this).rules('add', { 
     required: true, 
     number: true 
    }); 
}); 

http://jsfiddle.net/9W3F7/5/

---

文檔：

• rules('add') method

• addClassRules method

Answer 2

您可以使用「吸氣」語法這樣：

{ 
     rules: 
     { 
     email: { 
      required: true, 
      email: true 
     }, 

     first_name: { 
      required: true 
     }, 

     get last_name() {return this.first_name}, 

     password: { 
      required: true, 
      minlength: 4 
     } 
     } 
    }