javascript - 如何在一个函数中连接jquery字符串？
我有一个验证表单输入的函数，我发现我有很多问题，所以我想把它自动化，而不是手动输入。所以我创建了一个for循环，从1到25，它的工作。但我想把i加到'q'上，这样我就不用再输入'q1'、'q2'、'q3'...。但我就是不能把它们加在一起。
这是我的代码。
$(function () {
for (var i = 1; i <= 25; i++) {
console.log(i);
$('#form_validation').validate({
rules: {
'checkbox': {
required: true
},
'q' + i: {
required: true
}
},
highlight: function (input) {
$(input).parents('.form-line').addClass('error');
},
unhighlight: function (input) {
$(input).parents('.form-line').removeClass('error');
},
errorPlacement: function (error, element) {
$(element).parents('.form-group').append(error);
}
});
}
});
我真的不知道怎么做，希望你能帮我。 So I don't really know how and I hope you could help me.
【回答】：
你应该使用一个类来处理这个问题，通过 jQuery.validator.addClassRules
$(function() {
var myform = $('#form_validation');
jQuery.validator.addClassRules("question", {
required: true
});
$.validator.messages.required = 'Well, we need to know';
var myvalidator = $('#form_validation').validate({
rules: {
'checkbox': {
required: true
}
},
highlight: function(input) {
$(input).parents('.form-line').addClass('error');
},
unhighlight: function(input) {
$(input).parents('.form-line').removeClass('error');
},
errorPlacement: function(error, element) {
$(element).closest('.form-group').append(error);
}
});
$("#dovalidate").on("click", function(e) {
myform.validate();
myvalidator.form();
});
});.error {
background-color: #ffffdd;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.js"></script>
<form id="form_validation">
<div class="form-group">
<div class="form-line">
<input name="question1" class="question" type="text" />
</div>
</div>
<div class="form-group">
<div class="form-line">
<input name="question2" class="question" type="text" value="I got this" />
</div>
</div>
<div class="form-group">
<div class="form-line">
<input name="question3" class="question" type="text" data-msg="WOOPS fill this field" />
</div>
</div>
<div class="form-group">
<div class="form-line">
<input name="question4" required class="question" type="text" />
</div>
</div>
<div class="form-group">
<div class="form-line">
<input name="question5" class="question" type="text" value="Just GREAT" />
</div>
</div>
<div class="form-group">
<div class="form-line">
<input name="question6" class="question" type="text" />
</div>
</div>
<div class="form-group">
<div class="form-line">
<input name="question7" class="question" type="text" data-msg="What?" data-msg="What?" />
</div>
</div>
<div class="form-line">
<input type="checkbox" name="needcheese" />
<input type="checkbox" name="needcheese" />
<input type="checkbox" name="needcheese" />
<input type="checkbox" name="needcheese" />
</div>
</form>
<button id="dovalidate">Validate this</button>
