Javascript 如何在使用Jquery事件输入数据时验证输入？

如何在使用Jquery事件输入数据时验证输入

 $("#lname").blur(function() {
        if ($("#lname").val().trim().match(/^[a-zA-Z ]+$/)) {
            $("#lname").css({"border":"1px solid #cecece"});
            $("#error_lname").css("display","none");
        }
        else{
            $("#error_lname").css("display","block");
        }
    });

---

如果要验证用户类型，请使用

输入

事件，而不是

模糊

：

$("#lname").on('input', function() {
    if ($("#lname").val().trim().match(/^[a-zA-Z ]+$/)) {
        $("#lname").css({"border":"1px solid #cecece"});
        $("#error_lname").css("display","none");
    }
    else{
        $("#error_lname").css("display","block");

    }
});

但是，您应该注意，为了遵循最佳实践，您应该避免使用

css（）

，而是添加/删除外部样式表中定义的类，如下所示：

$("#lname").on('input', function() { 
    var $el = $(this);
    var valid = $el.val().trim().match(/^[a-zA-Z ]+$/);
    $el.toggleClass('invalid', !valid);
    $el.next('.error-msg').toggle(!valid);
});

。无效{边框：1px实心#CECECE；}

---

请注意，以上假设您正在验证的

输入

具有以下同级，即错误消息，其类为

.error msg

。以这种方式组织逻辑意味着验证逻辑可以很容易地泛化-而不是由于

\error\u lname

选择器而绑定到每个控件。

Rory的答案很完美，我只想补充一点，您也可以使用事件来获得相同的效果

$（“#lname”）.on（'keyup'，function（）{
var$el=$（本）；
var valid=$el.val（）.trim（）.match（/^[a-zA-Z]+$/）；
$el.toggleClass（'invalid'，！valid'）；
$el.next（'.error msg'）.toggle（！valid）；
});
。错误消息{
显示：无；
颜色：红色；
}
.无效{
边框：1px纯红；
}

姓氏：
此处出现错误消息…
请注意，如果通过鼠标粘贴，则不会触发。是的，这是真的，我刚测试时才意识到这一点。谢谢，我也学到了一些新东西：）