jQuery验证插件和Bootstrap 4

我正在使用jQuery验证插件进行js表单验证。我还使用了Bootstrap4。我发现我需要修改，并进行修改errorPlacement，以便正确地以BS4样式显示验证错误。highlightunhighlight

$('#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代码我每次使用验证？

1> Alex..：

---

没有足够清楚地阅读文档。

解：

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

---

如果没有用，我会发布答案吗？哈哈

2> 小智..：

---

所描述的默认设置将在带有以下内容的引导程序4上运行：

jQuery.validator.setDefaults({
    highlight: function(element) {
        jQuery(element).closest('.form-control').addClass('is-invalid');
    },
    unhighlight: function(element) {
        jQuery(element).closest('.form-control').removeClass('is-invalid');
    },
    errorElement: 'span',
    errorClass: 'label label-danger',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});

不要忘记将类class =“ form-control”添加到输入字段。我唯一找不到的是如何在输入错误时将输入字段着色为红色，在输入正确时将其获取绿色。也许有人可以在我的答案中添加该选项？

---

如果可以，则为WRT绿色：此链接应做到这一点：jQuery（element）.closest（'。form-control'）。removeClass（'is-invalid'）。addClass（'is-valid'）`