0

jquery 实时验证检查的最佳方法是什么？

Onsubmit 每个标签的跨度更改为例如：

输入您的电子邮件 | 提交 | 电子邮件不正确

但是当您再次更改值时，您必须再次提交以删除电子邮件不正确的消息。

所以我正在寻找“实时”错误处理或其他东西。考虑到我的代码，最好的方法是什么？

<script type="text/javascript">
    $(document).ready(function()
    {
        $('form #status').hide();
        $('#submit').click(function(e) {
            e.preventDefault();

            var valid = '';
            var required = 'is required';
            var name = $('form #name').val();
            var subject = $('form #subject').val();
            var email = $('form #email').val();
            var message = $('form #message').val();
            var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;

            //error checking
            if (name == '' || name.length <= 2)
            {
                valid = '<p>your name' + required + '</p>';
                $('form #nameInfo').text('Name can not contain 2 characters or less!');
            }

            if(!filter.test(email)){
                valid += '<p>Your email'+ required +'</p>';
                $('form #emailInfo').text('Email addres is not valid');
            }

            if (message == '' || message.length <= 5)
            {
                valid += '<p>A message' + required +'</p>';
                $('form #messageInfo').text('Message must be over 20 chars');
            }

            if (valid != '')
            {
                $('form #status').removeClass().addClass('error')
                        .html('<strong>Please correct errors belown </strong>' + valid).fadeIn('fast')
            }
            else
            {
                $('form #status').removeClass().addClass('processing').html('Processing...').fadeIn('fast');
                var formData = $('form').serialize();
                submitForm(formData);
            }

        });
    });
    </script>
4

1 回答 1

0

我不是 100% 确定我理解这个问题。您想#emailInfo在用户更正输入时重置文本吗？如果是这样，您可以使用onchange,onkeypres或focus事件：

$("#email").change(function(){
    $("#nameInfo").text("Enter your email");
});

更好的是，您可以在相应的字段change上而不是在 form上进行验证submit。

以下示例将验证按下的每个键上的电子邮件字段：

$("#email").keypress(function(){
    var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
    var email = $('#email').val();

    if(!filter.test(email)){
        $('#emailInfo').text('Email addres is not valid');
    } else {
        $('#emailInfo').text('');
    }
});

您可以以类似的方式验证其他字段。或者你可以使用jQuery Validation插件。

于 2012-09-14T03:54:18.267 回答