我的表格中有很多字段相似的字段。它们都具有相同的验证规则和消息。我想要的只是在js部分使用一些变量并缩短这些代码并使其更具动态性。但是，我无法弄清楚如何做到这一点。
Html表格：
<form id="myForm" novalidate="novalidate">
<div class="row form-section mr-b30"> <!-- FORM SECTION START -->
<div class="col-xl-12 form-blocks-wrapper"> <!-- FORM BLOCK WRAPPER START -->
<div class="container-full form-block mr-b30" id="Farmasotik_Formlar"> <!-- FORM BLOCK START -->
<div class="row form-parts-wrapper"> <!-- FORM PART START -->
<div class="container">
<div class="row form-parts-group">
<div class="col-xl-6 select-container">
<div class="row">
<div class="col-xl-12 container-title">
<h4>Field 1</h4>
</div>
<div class="input-field select-item-container col-xl-12">
<select class="select-box" id="field[0][0]" name="field[0][0]" required="required" aria-required="true">
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</div>
</div>
<div class="col-xl-6 select-container">
<div class="row">
<div class="col-xl-12 container-title">
<h4>Field 2</h4>
</div>
<div class="input-field select-item-container col-xl-12">
<select class="select-box" id="field[0][1]" name="field[0][1]" required="required" aria-required="true">
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</div>
</div>
<div class="col-xl-6 select-container">
<div class="row">
<div class="col-xl-12 container-title">
<h4>Field 3</h4>
</div>
<div class="input-field select-item-container col-xl-12">
<select class="select-box" id="field[1][0]" name="field[1][0]" required="required" aria-required="true">
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</div>
</div>
<div class="col-xl-6 select-container">
<div class="row">
<div class="col-xl-12 container-title">
<h4>Field 4</h4>
</div>
<div class="input-field select-item-container col-xl-12">
<select class="select-box" id="field[1][1]" name="field[1][1]" required="required" aria-required="true">
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</div>
</div>
<div class="col-xl-6 select-container">
<div class="row">
<div class="col-xl-12 container-title">
<h4>Field 5</h4>
</div>
<div class="input-field select-item-container col-xl-12">
<select class="select-box" id="field[2][0]" name="field[2][0]" required="required" aria-required="true">
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</div>
</div>
<div class="col-xl-6 select-container">
<div class="row">
<div class="col-xl-12 container-title">
<h4>Field 6</h4>
</div>
<div class="input-field select-item-container col-xl-12">
<select class="select-box" id="field[2][1]" name="field[2][1]" required="required" aria-required="true">
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div> <!-- FORM PART END -->
</div> <!-- FORM BLOCK END -->
</div> <!-- FORM BLOCK WRAPPER END -->
</div> <!-- FORM SECTON END -->
<input type="submit" value="submit" id="submit" name="action">
</form>
Validation.js：
$(document).ready(function() {
$("select").material_select();
$("select[required]").css({display: "block", height: 0, padding: 0, width: 0, position: 'absolute'});
var req = "Required.";
$("#myForm").validate({
rules: {
field[0][0]: {
required: true
},
field[0][1]: {
required: true
},
field[1][0]: {
required: true
},
field[1][1]: {
required: true
},
field[2][0]: {
required: true
},
field[2][1]: {
required: true
}
},
messages: {
field[0][0]: {
required: req
},
field[0][1]: {
required: req
},
field[1][0]: {
required: req
},
field[1][1]: {
required: req
},
field[2][0]: {
required: req
},
field[2][1]: {
required: req
}
},
errorElement : 'div',
errorPlacement: function(error, element) {
var placement = $(element).data('error');
if (placement) {
$(placement).append(error)
} else {
error.insertAfter(element);
}
}
});
});
这就是我想要的：
$(document).ready(function() {
$("select").material_select();
$("select[required]").css({display: "block", height: 0, padding: 0, width: 0, position: 'absolute'});
var req = "Required.";
var field = "field"+"*";
$("#myForm").validate({
rules: {
field: {
required: true
}
},
messages: {
field: {
required: req
}
},
errorElement : 'div',
errorPlacement: function(error, element) {
var placement = $(element).data('error');
if (placement) {
$(placement).append(error)
} else {
error.insertAfter(element);
}
}
});
});
答案 0 :(得分：2)
试试这个，
$(document).ready(function() {
var req = "Required.";
$("#myForm").validate({
submitHandler: function(form) {
form.submit();
}
});
$(".select-box").each(function(){
$(this).rules("add", {
required:true,
messages:{required:req}
});
});
});
jsFiddle为相同的