0

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);
    }
});
4

2 回答 2

0

试试这个…… 演示

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);
    }
});
于 2013-07-15T09:22:36.970 回答
0

正如我在评论中所说，我看不出有什么理由用来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/

于 2013-07-15T09:23:23.213 回答