jQuery验证表单并在验证后提交

Question

我有这样的标记代码

<div>
  <form action="http://fileaction.com">
    <label for="email">Email:</label>
    <input type="text" name="email" id="login-email" class="">
    <label for="password">Password:</label>
    <input type="password" name="password" id="login-password" class="">
    <input type="submit" id="login" value="Login">
  </form>
  </div>

在这个表单中，我有两个字段。一个用于电子邮件，另一个用于密码。我想验证它们。所以条件会是这样 电子邮件字段将匹配电子邮件模式，密码字段将检查 6 到 16 个字符之间的密码。 一旦该字段将被验证，它将重定向到表单操作。因此，为此我编写了这样的代码

var emailField = jQuery('#login-form-wrap input#login-email');
  var passwordField = jQuery('#login-form-wrap input#login-password');
  var emailPattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);

jQuery('input#login').click(function(e) {
  e.preventDefault();
  if(emailField.val().length > 0  ||   emailPattern.test(emailField) ) {
    emailField.removeClass('error');
  }
  else {
    emailField.addClass('error');
  }
  if(passwordField.val().length > 6  ) {
     passwordField.removeClass('error');
  }
  else {
    passwordField.addClass('error');
  }

});

但它没有验证电子邮件模式，并且在两个字段都有效后，它应该重定向到提交时的表单操作页面。

Answer 1

看看http://api.jquery.com/submit/

它可以将提交事件绑定到您的表单，因此您首先可以进行验证，然后在一切正常的情况下继续常规提交。

请不要忘记来自后端的验证；）

Answer 2

var emailField = jQuery('#login-email');
var passwordField = jQuery('#login-password');
//there is no need to use new RegExp() since you have a regex literal
var emailPattern = /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i;

//since you have an id, don't use the element selector
jQuery('login-form-wrap form').submit(function (e) {
    //problem here prevent the default only if the value is invalid
    //e.preventDefault();
    var valid = true;
    if (emailField.val().length > 0 && emailPattern.test(emailField.val())) {
        emailField.removeClass('error');
    } else {
        //set the valid flag to false if the field is invalid
        valid = false;
        emailField.addClass('error');
    }
    if (passwordField.val().length > 6) {
        passwordField.removeClass('error');
    } else {
        valid = false;
        passwordField.addClass('error');
    }
    //if the flag is false then the form contains an invalid value, so prevent the defuault action of the click
    if (!valid) {
        e.preventDefault();
    }
});

注意：也不要将点击处理程序绑定到提交按钮，而是使用form 的submit 事件处理程序

演示：Fiddle