設置相同的屬性更多的領域

Question

我有兩個或更多的文本字段，我想對他們適用相同的屬性，避免寫兩次或多次相同的代碼

這不起作用：

$("#form").validate({ 
    rules: 
    { 
    'name', 'surname':{ 
     required: true, 
     minlength: 3, 
     maxlength: 50 
     } 
    } 
}); 

有什麼想法嗎？

Answer 1

嘗試像這樣

var ruleSet1 = { 
     required: true, 
     minlength: 3, 
     maxlength: 50 
    }; 

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

或做一個一個如下，

$("#form").validate({ 
    rules: 
    { 
    name: { required: true }, 
    surname:{ 
     required: true, 
     minlength: 3, 
     maxlength: 50 
     } 
    } 
}); 

Answer 2

應用CSS類到所有領域

$(".cssClassName").rules("add", { 
     required: true, 
     minlength: 3, 
      maxlength: 50 , 
     messages: 
    {required:"error1",minlength:"error2",maxlength:"error3"}}); 

Answer 3

定義屬性作爲一個變量，然後使用它：

var name_reqs = { 
    required: true, 
    minlength: 3, 
    maxlength: 50 
}; 

$("#form").validate({ 
    rules: { 
      'name': name_reqs, 
     'surname': name_reqs 
    } 
}); 

Answer 4

顯然有幾個方法可以做到這一點，但如果你使用一個class rule:

$.validator.addClassRules("name", { 
    required: true, 
    minlength: 3, 
    maxlength: 50 
}); 

那麼你可以設置你的規則，像這樣

$("#form").validate({ 
    rules: 
    { 
    firstname : name, 
    surname : name 
    } 
}); 

或使用類名設置規則：

<input id="firstname" name="firstname" class="name"> 
<input id="surname" name="surnname" class="name"> 

這個方法在jQuery validate gen的refactoring rules部分討論口頭準則。

Answer 5

從my previous answer以：

---

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

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 
     } 
    } 
}); 

DEMO：http://jsfiddle.net/rq5ra/

---

方案1A）您可以分配類基於期望的共同規則的領域，然後分配這些規則的類。您也可以分配自定義消息。

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" /> 

.rules('add') method的必須稱爲調用.validate()和.each()必須用於靶向與class所有元素之後。

的jQuery：

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

$('.num').each(function() { 
    $(this).rules('add', { 
     required: true, 
     number: true, 
     messages: { 
      required: "your custom message", 
      number: "your custom message" 
     } 
    }); 
}); 

DEMO：http://jsfiddle.net/rq5ra/1/

可能性1b）與上述相同，但代替使用class，它匹配的名稱屬性的公共部分：

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

DEMO：http://jsfiddle.net/rq5ra/6/

---

選項2a）你可以拉出來的規則組，並將其合併爲公共變量。

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

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

DEMO：http://jsfiddle.net/rq5ra/4/

---

選項2b）中相關於上述圖2a但根據您的複雜程度，可以分離出所共有的某些基團和使用.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 

var ruleSet3 = { }; 
$.extend(ruleSet3, ruleSet1, ruleSet2); // combines sets 2 & 1 into set 3. Defaults are included since they were already combined into sets 1 & 2 previously. 

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

最終結果是：

• field_1將是一個需要數不低於3
• field_2將只是一個所需數量。
• field_3將是一個需要數不大於99
• field_4將是3至99之間的所需數量

DEMO：http://jsfiddle.net/rq5ra/5/