Question

我有一个使用操作属性<form action='/example/url'>提交到网址的表单。它使用jQuery验证插件。

jQuery("form#page-0").validate({
        ignore: ':hidden'
        ,rules: {"product_id_page-0":{"required":true},"name_f":{"required":true,"regex":["^[^=:<>{}()\"]+$",""]},"name_l":{"required":true,"regex":["^[^=:<>{}()\"]+$",""]},"email":{"required":true,"remote":{"url":"\/premium\/ajax?do=check_uniq_email&_url=L3ByZW1pdW0vbG9naW4\/YW1lbWJlcl9yZWRpcmVjdF91cmw9JTJGcHJlbWl1bSUyRnNpZ251cC5waHA="}},"login":{"required":true,"rangelength":["6","32"],"regex":["^([0-9a-zA-Z_][0-9a-zA-Z_ ]+[0-9a-zA-Z_]|[0-9a-zA-Z_]+)$",""],"remote":{"url":"\/premium\/ajax?do=check_uniq_login"}},"pass":{"required":true,"rangelength":["6","32"]},"_pass":{"required":true}}
        ,messages: {"product_id_page-0":{"required":"Please choose a membership type"},"name_f":{"required":"Please enter your First Name","regex":"Please enter your First Name"},"name_l":{"required":"Please enter your Last Name","regex":"Please enter your Last Name"},"email":{"required":"Please enter valid Email","remote":"--wrong email--"},"login":{"required":"Please enter valid Username. It must contain at least 6 characters","rangelength":"Please enter valid Username. It must contain at least 6 characters","regex":"Username contains invalid characters - please use digits, letters or spaces","remote":"--wrong login--"},"pass":{"required":"Please enter Password","rangelength":"Password must contain at least 6 letters or digits"},"_pass":{"required":"This field is required"}}
        //,debug : true
        ,errorPlacement: function(error, element) {
            error.appendTo( element.parent());
        }
        ,submitHandler: function(form, event){form.submit();}
        // custom validate js code start

        ,errorElement: "span"
        // custom validate js code end
    });

问题是有时表单在验证器触发之前提交到url。我对submitHandler: function(form, event){form.submit();}持怀疑态度，因为我不明白event参数在做什么。在jquery validation的文档中，没有提到第二个参数。

欢迎任何调试表单的建议。记录变量或以其他方式查看正在发生的事情。我确实设置了debug:true，但它似乎没有向控制台吐出任何错误。

Answer 1

问题是有时表单会在验证器触发之前提交到url。

可能是因为您指定了不存在的规则。没有名为regex的规则/方法。但是，pattern文件中包含一个名为additional-methods.js的文件。这是您遇到问题的根本原因。满足required规则后，插件会尝试评估regex规则和阻塞。

我对submitHandler: function(form, event){form.submit();}持怀疑态度，因为我不明白event参数在做什么。在jquery验证的文档中，没有提到第二个参数。

如果您不了解它正在做什么并且它不在文档中，那么为什么要将event参数放入您的代码中？

文档是正确的，没有第二个参数。但是，拥有额外的论点只是多余的，不会破坏任何东西。

您使用了一种非常不寻常的代码格式样式，使其难以阅读和排除故障。

,submitHandler: function(form, event){form.submit();}

此回调没有第二个参数，因此您可以删除event。
由于您form.submit()中只有submitHandler，因此与默认设置不同。换句话说，删除整个submitHandler，并在验证后，表单将根据默认值提交到action属性。

备注：

ignore: ":hidden"是默认行为，因此您无需指定它。

没有必要将规则名称括在引号内。

DEMO：http://jsfiddle.net/1e82p64f/

调试jQuery表单验证

1 个答案: