javascript - 如何捕获验证错误的类型？

Question

我正在使用 the jQuery Validate plugin我有这段代码来捕获错误并将一个类 (myerror) 应用于导致验证失败的字段。

我想对此进行扩展以捕获所捕获的错误类型。

示例 1:如果您没有填写该字段。应用 Class1 (css background-color:lightRed)

例2:字段数据格式错误。应用 Class2 (css background-color:lightBlue)

jQuery(function ($) {
    var validator = $('#form').validate({
        rules: {
            ip: {
                  required: true,
                  ipv4: true
            }
        },
        messages: {},
        errorPlacement: function (error, element) {},
        highlight: function (element, errorClass, validClass) {
            $(element).addClass('myerror')
        },
        unhighlight: function (element, errorClass, validClass) {
            $(element).removeClass('myerror')
        }
    }); 
 });

Answer 1

好吧，事实证明你可以......(排序)做到这一点。

我在验证中使用了 $(element).val(); 来确定字段是否为空。

1. 如果该字段为空，那么它就丢失了。

2. 如果该字段已归档但触发了验证，则其格式一定不正确。

所以我使用了一个气泡类来在单独的 div 元素中显示错误。不像传统的内联错误消息。

这种“疯狂”的原因是因为 html 表单很小，如果您允许错误消息内联显示，它会将糟糕的 html 表单拉到位。我觉得这样做有更多的控制权。

验证码

            var validator = $("#storeEditFrm").validate({
                    rules: {
                        "store_name": "required",
                        "street_name": "required",
                        "suburb_name": "required",
                        "city_name": "required",
                        "country_name": "required",
                        "phone": "required",
                        "store_email": {
                            required: true,
                            email: true
                        },
                        "ip_address": {
                            required: true,
                            ipv4: true
                        }
                    },
                    messages: {},
                    errorPlacement: function(error, element) {},
                    highlight: function (element, errorClass, validClass) {

                        $(element).prev().prev().addClass('bubble');
                        var v = $(element).val();
                        if(v == ''){$(element).prev().prev().html('Required field')}
                        if(v != ''){$(element).prev().prev().html('Please check format')}
                    },
                    unhighlight: function (element, errorClass, validClass) {
                        $(element).prev().prev().removeClass('bubble');
                    }
            });

这是一个 fiddle ，需要一些 CSS 工作，但你明白了。

FIDDLE