【问题标题】:JQuery form validationJQuery 表单验证
【发布时间】:2013-06-10 23:20:36
【问题描述】:

我的问题是,我有一个表单,我想使用 jquery 验证字段,如果数据正确,我让提交继续,如果没有,我通过返回 false 禁用默认行为(在教程,here)。
所以我使用了我所说的jquery语法,当文档准备好时,我注册了按钮的点击事件,问题是代码永远不会被执行。我用萤火虫,但没有线索。什么都没有发生,所以这是我的代码:

$('#submitBtn').click(function()
{
    var password1 = $('#form_password').val();
    var password2 = $('#form_password2').val();
    if( password1 != password2)
    {
        alert("the two passwords are not equal.");
    }
    return false; //to disable the default behavior of the submit btn
});

【问题讨论】:

    标签: jquery


    【解决方案1】:

    检查表单提交的正确方法是检查表单的submit 事件,而不是按钮的click 事件。改变它,你所拥有的应该可以工作,尽管现在它总是在做return false;,所以表格永远不会被发送。应该这样做:

    $('#myform').submit(function() {
            var motPasse1 = $('#form_motPasse').val();
            var motPasse2 = $('#form_motPasse2').val();
            if(motPasse1 != motPasse2){
                alert("Les deux mot de passe ne sont pas identiques");
                return false; // cancel form submission if passwords don't match
            }
            return true; // return true if no errors
    });
    

    最后,我希望您不要将alert 留在那里用于生产目的。 :) 显示用户通知的方式比警报要好得多。查看this question 以获得一些建议,尽管有一些简单的错误<div> 并将其淡入比丑陋的默认浏览器警告框更好。

    【讨论】:

    • 谢谢,但问题是每次我尝试都会发送表单。相信我,如果不是这样,我不会寻求帮助。
    • 您是否已经尝试将其绑定到表单的提交事件?正如我所说,如果你将它绑定到按钮的点击事件,这不是一种可靠的检查方式,因为按下回车键不会触发事件。
    • 使用表单的提交事件,效果很好,非常感谢您的帮助。
    【解决方案2】:

    既然你说你正在使用一个表单,你可以绑定到表单的submit事件:

    $('form#id').submit(function(){
      // your validation code
    });
    

    【讨论】:

      【解决方案3】:

      您应该查看JQuery Validation Plugin。它由 JQuery 团队的一名成员维护,有助于简化客户端表单验证。

      【讨论】:

        【解决方案4】:

        你的问题是你总是返回 false 它应该如下所示:

        $('#envoyerButton').click(function()
        {
                var motPasse1 = $('#form_motPasse').val();
                var motPasse2 = $('#form_motPasse2').val();
                if( motPasse1 != motPasse2)
                {
                        alert("Les deux mot de passe ne sont pas identiques");
                        return false;
                }
                return true;
        });
        

        【讨论】:

          猜你喜欢
          • 2011-07-12
          • 2013-10-07
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多