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

Question

如何在使用 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");
        }
    });

Answer 1

如果您想在用户输入时进行验证，请使用 input 事件而不是 blur:

$("#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);
});

.invalid { border: 1px solid #CECECE; }

请注意，上面假设您要验证的 input 有一个后续同级，即具有 .error-msg 类的错误消息。以这种方式组织逻辑意味着验证逻辑可以很容易地通用化 - 而不是由于 #error_lname 选择器而被绑定(bind)到每个控件。