我正在使用jQuery validation plugin用于我的 js 表单验证。我也在使用 Bootstrap 4。我发现我需要修改 errorPlacement
、highlight
和 unhighlight
来使其验证错误以 BS4 风格正确显示。
$('#login-form').validate({
rules: {
login_username: {
required: true
},
login_password: {
required: true
}
},
errorElement: 'span',
errorPlacement: function (error, element) {
error.addClass('invalid-feedback');
element.closest('.form-group').append(error);
},
highlight: function (element, errorClass, validClass) {
$(element).addClass('is-invalid');
},
unhighlight: function (element, errorClass, validClass) {
$(element).removeClass('is-invalid');
},
submitHandler: function (form) {
neou_cms.remove_error_messages();
var username = form.elements['login_username'].value;
var password = CryptoJS.SHA512(form.elements['login_password'].value).toString();
login.login_user(username, password);
}
});
因此,对于每个函数,我发现自己都在重复这些属性。有没有一种方法可以“扩展”验证库,这样我就不必每次都重复 errorPlacement
、highlight
和 unhighlight
代码我什么时候使用验证?
最佳答案
解决方案:
https://jqueryvalidation.org/jQuery.validator.setDefaults/
jQuery.validator.setDefaults({
errorElement: 'span',
errorPlacement: function (error, element) {
error.addClass('invalid-feedback');
element.closest('.form-group').append(error);
},
highlight: function (element, errorClass, validClass) {
$(element).addClass('is-invalid');
},
unhighlight: function (element, errorClass, validClass) {
$(element).removeClass('is-invalid');
}
});
关于jQuery 验证插件和 Bootstrap 4,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52159649/