jquery - 输入验证 - 样式

Question

http://jsfiddle.net/dm6Hm/23/ 我想知道是否可以验证我输入的样式，但这应该只在我点击输入字段后发生，这意味着背景颜色在我完成输入并点击其他地方后恢复为默认白色。到目前为止，它能够接收数据并正确验证信息，但如果我点击其他地方，它不会重置白色背景。

<input type="email" class="Email" value="Email"/>
<input type="text" class="fname" value="First Name"/>

function isEmail(email){
    var reg = /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/;
    return reg.test(email);
}

$(".Email").keydown(function(e) {
    var $test = $(this).css("background-color", "");
    if (isEmail($test.val())) {
    setTimeout(function() {
        $test.css("background-color", "green").focus();
    }, 0);
    }else{
    setTimeout(function() {
        $test.css("background-color", "red").focus();
    }, 0);
    }
});

function isfname(text){
    var reg = /^[a-z ,.'-]+$/i;
    return reg.test(text);
}

$(".fname").keydown(function(e) {
    var $test = $(this).css("background-color", "");
    if (isEmail($test.val())) {
        setTimeout(function() {
            $test.css("background-color", "green").focus();
        }, 0);
     }else{
        setTimeout(function() {
            $test.css("background-color", "red").focus();
        }, 0);
    }
});

Answer 1

正如我在评论中所说，我没有看到使用 setTimeout 来突出显示背景的原因。你可以直接做。此外，您还可以使用 blur() 重置背景。

这是电子邮件字段的示例，您可以对名字做同样的事情:

$(".Email").keyup(function(e) {
    var $test = $(this);
    if (isEmail($test.val())) {
        $test.css("background-color", "green");
    } else {
        $test.css("background-color", "red");
    }
}).blur(function(e) {
    $(this).css("background-color", "");  
});

这是固定的 fiddle :http://jsfiddle.net/dm6Hm/28/