Question

http://jsfiddle.net/dm6Hm/23/ 我想知道是否有可能验证输入的样式，但这应该只在我点击输入字段后发生，这意味着背景颜色在我＆＃39之后返回到它的默认白色;完成打字并点击其他地方。到目前为止，它能够正确接收数据并验证信息，但如果我点击其他任何地方，它将无法重置白色背景。

<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

试试这个...... Demo

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

    return reg.test(email);
}

$(".Email").keyup(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);
    }
});
$(".Email").blur(function(e) {
    var $test = $(this).css("background-color", "");
    if (isEmail($test.val())) {
        setTimeout(function() {    alert("dsd");
            $test.css("background-color", "white").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").keyup(function(e) {
    var $test = $(this).css("background-color", "");
    if (isfname($test.val())) {
        setTimeout(function() {
            $test.css("background-color", "green").focus();
        }, 0);
    }else{
        setTimeout(function() {
            $test.css("background-color", "red").focus();
        }, 0);
    }
});


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

Answer 2

正如我在评论中所说，我没有看到使用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", "");  
});

这是固定的小提琴：http://jsfiddle.net/dm6Hm/28/

输入验证 - 样式

2 个答案: