如何使用JQUERY实时验证

How to validate with JQUERY real-time

本文关键字：验证 实时 JQUERY 何使用      更新时间：2023-09-26

我遇到一个问题。我希望能够在我的网站上用JQUERY实时验证多种形式的数据。例如，我有一个"添加客户"表单，我希望能够禁用Submit按钮，直到所有字段都经过验证。验证必须实时发生，也就是每次鼠标移动，上下键，页面加载等等之后。另一个例子是当我为我的一个当前客户点击"Edit Customer"时。弹出一个Modal窗体，其中已经输入了所有当前信息。Submit按钮必须处于活动状态，因为所有字段都已经过验证。例如，如果我删除了名字，Submit按钮就必须禁用。验证发生在很多方面，我正在使用性能来验证电话号码和电子邮件。

不管怎样，我已经有了一些工作，但它是错误的。我想知道最好的方法是什么?我做得对吗?下面是一个例子:

$(document).on('click focus focusin focusout hover keydown keypress keyup load', function() {
if ($("#customer-add-form input[name='phoneNumber']").formance('validate_phone_number') &&
    $("#customer-add-form input[name='email']").formance('validate_email') &&
    $("#customer-add-form input[name='zipCode']").formance('validate_number') &&
    $("#customer-add-form input[name='city']").val().length >= 2 && 
    $("#customer-add-form input[name='firstName']").val().length >= 2 && 
    $("#customer-add-form input[name='lastName']").val().length >= 2 && 
    $("#customer-add-form input[name='companyName']").val().length >= 2 && 
    $("#customer-add-form input[name='address']").val().length >= 2){
        $("#customer-add-form input[type='submit']").prop("disabled", false);
} else {
    $("#customer-add-form input[type='submit']").prop("disabled", true);
} 
}

我建议你不要"重新发明轮子"。

这是一个很好的jQuery表单验证插件:http://formvalidator.net/#reg-form

如果你必须自己滚动，那么你会想要使用这样的东西:

$('input').on('change', function(){...});
相关文章：