jQuery 验证插件和 Bootstrap 4

Question

我正在使用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 代码我什么时候使用验证？

Answer 1

解决方案:

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