jquery - 带有简单 if else if 语句 jQuery 的可见性 CSS

Question

我正在尝试使用正则表达式验证用户输入。如果用户未填写该字段，则会显示错误“请填写该字段”。问题是如果用户没有填写该字段，也会显示第二个错误。我怎样才能阻止这种情况发生？这是我尝试过的：

if (!regex.test($('#fname').val())) {
            $("#err2fname").removeClass("hidden"); //displays error if it doesn't match the regex
    }
    else if ($("#fname").val() == "" ) {
        $("#err2fname").addClass("hidden"); //hides if field is empty
    }
    else ($("#err2fname").addClass("hidden")); //hides if it matches the regex

我创建了一个显示我的问题的小提琴。

Answer 1

   if ($("#fname").val() == "") {
        $("#errfname").removeClass("hidden");
        $("#err2fname").addClass("hidden");
    } else {
        $("#errfname").addClass("hidden");
        if (!regex.test($('#fname').val())) {
            $("#err2fname").removeClass("hidden");
        } else {
            $("#err2fname").addClass("hidden");
        }
    }

我已经更新了你的小提琴。请试着看看这个小提琴

Answer 2

$("#fname").blur(function () {
    $("#errfname").toggleClass("hidden", this.value != "");
    $("#err2fname").toggleClass("hidden", !regex.test(this.value) && this.value.length);
})

http://jsfiddle.net/SrHGX/1/