Question

我已经编写了一段代码来验证某些文本字段，但它不能正常工作，因为我需要它。

我以两种方式检查每个字段的有效输入，一次是有效的电子邮件地址（使用正则表达式），另一种是检查字段是否为空。然后我显示任何错误消息并更改相关文本框的边框颜色。

如果在验证过程中没有问题我想重置边框颜色，我面临的问题就出现了，但我认为我设置代码的方式让我很难实现这一点。

function validation() {
    var errorList = '';

    validate_email("input[id$='tbTheirEmail']", "Sorry, the recipient’s email address is invalid.");
    validate_email("input[id$='tbYourEmail']", "Sorry, your email address is invalid.");

    validate_field("input[id$='tbTheirEmail']", 'Sorry, you need to enter a recipient’s email address.');
    validate_field("input[id$='tbYourEmail']", 'Sorry, you need provide your email address.');

    if (errorList <= 0) {
        SendEmail();
        $("#popupErrorMessage ul").html('');

    }
    else {
        $("#popupErrorMessage ul").html(errorList);
    }

    function validate_email(email, message) {
        var regex = (/[a-z0-9!#$%&'*+\/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+\/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/i);
        if ($(email).val() != '') {
            if (!regex.test($(email).val())) {
                errorList += "<li>" + message + "</li>";
                $(email).css("border-color", "#da1f27");
            }
            else{
                $(email).css("border-color", "#e6e7e8");
            }
        }
    }
    function validate_field(element, message) {
    if ($(element).val() == '') {
        errorList += "<li>" + message + "</li>";
        $(element).css("border-color", "#da1f27");
    }
    else{
       $(element).css("border-color", "#e6e7e8");
    }
}
}

您可能会在代码中注意到执行了验证检查，然后是空字段检查。因此，如果有效的电子邮件功能失败，则会显示错误并且边框会发生变化，但是空字段功能会立即触发并立即传递，因此颜色会立即变回原来的颜色，这不是我想要的颜色。

我怀疑我的功能需要进行重组以实现这一目标，但我不确定如何去做，所以我们非常感谢任何帮助。

Answer 1

在这种情况下，我建议使用类来更改文本域边框，而不是简单地更改CSS。您需要做的是在CSS上设置两个新类。例如：

.validBorder {
    border-color: #e6e7e8;
    border-width:1px;
    border-style: solid;
}

.invalidBorder {
    border-color: #da1f27;
    border-width:1px;
    border-style: solid;
}

然后根据具体情况调用$(element).css("border-color", "#da1f27");或$(element).addClass('validBorder');，而不是致电invalidBorder。

希望这能帮到你！

jQuery验证边框颜色

1 个答案: