Question

我尝试使用js进行表单验证，我遇到的问题是无论表单中显示的错误是什么，表单始终都会提交。表单包含6个字段：用户名，电子邮件，密码，retype_pass，first_name，last_name。 js代码是这样的：

＆＃13;

{{1}}

＆＃13;

Answer 1

$(function checkForBlank() {
  $("#username_err_msg").hide();
  $("#email_err_msg").hide();
  $("#pwd_err_msg").hide();
  $("#confirm_pwd_err_msg").hide();
  $("#fname_err_msg").hide();
  $("#lname_err_msg").hide();


  var username_err = false;
  var email_err = false;
  var pwd_err_msg = false;
  var confirm_pwd_err_msg = false;
  var fname_err = false;
  var lname_err = false;


  $("#userName").focusout(function() {
    check_userName();
  });
  $("#inputEmail").focusout(function() {
    check_email();

  });
  $("#password").focusout(function() {
    check_pwd();
  });
  $("#inputConfirmPassword").focusout(function() {
    check_pwd_conf();
  });
  $("#inputFirstName").focusout(function() {
    check_fname();
  });
  $("#inputLastName").focusout(function() {
    check_lname();
  });


  function check_userName() {
    var username_length = $("#userName").val().length;
    if (username_length < 5 || username_length > 20) {
      $("#username_err_msg").html("Username must be between 5 and 20 characters ! ");
      $("#username_err_msg").show();
      username_err = true;
    } else {
      $("#username_err_msg").hide();
    }
  }

  function check_pwd() {

    var pass = $("#password").val();
    var pass_length = $("#password").val().length;
    var re = /^[a-zA-Z_0-9@\!#\$\^%&*()+=\-[]\\\';,\.\/\{\}\|\":<>\? ]+$/;
    //if pwd is less than 10 and doesnt contain special chars
    if (pass_length < 6) {
      $("#pwd_err_msg").html("Weak ! ");
      $("#pwd_err_msg").show();
      pwd_err_msg = true;
    } else {
      //if pwd is >= 5 or <= 10,and contains special char
      if (pass_length >= 6 && pass_length < 9 && !re.test(pass)) {
        $("#pwd_err_msg").html("Medium! ");
        $("#pwd_err_msg").show();
        pwd_err_msg = true;
      } else {
        //if pwd >11 and contains special char
        if (pass_length >= 9 && !re.test(pass)) {
          $("#pwd_err_msg").html("Strong! ");
          $("#pwd_err_msg").show();
          pwd_err_msg = true;
        } else {
          $("#pwd_err_msg").hide();
        }
      }
    }
  }

  function check_pwd_conf() {
    var pass1 = $("#password").val();
    var pass2 = $("#inputConfirmPassword").val();
    if (pass1 != pass2) {
      $("#confirm_pwd_err_msg").html("Passwords don't match! ");
      $("#confirm_pwd_err_msg").show();
      pwd_err_msg = true;
    } else {
      $("#confirm_pwd_err_msg").hide();
    }
  }

  function check_email() {
    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    var email = $("#inputEmail").val();
    if (re.test(email)) //valid email address
    {
      $("#email_err_msg").hide();
    } else {
      $("#email_err_msg").html("Invalid email address!");
      $("#email_err_msg").show();
      email_err = true;
    }
  }

  function check_fname() {
    var fname_length = $("#inputFirstName").val().length;
    var first = $("#inputFirstName").val();
    var re = /\d/g;
    if (fname_length <= 2 || fname_length > 20) {
      $("#fname_err_msg").html("First name must be between 2 and 20 characters ! ");
      $("#fname_err_msg").show();
      fname_err = true;
    } else {
      if (re.test(first)) {
        $("#fname_err_msg").html("First name must not contain digits ! ");
        $("#fname_err_msg").show();
        fname_err = true;
      } else {
        $("#fname_err_msg").hide();
      }
    }
  }

  function check_lname() {
    var lname_length = $("#inputLastName").val().length;
    var sec = $("#inputLastName").val();
    var re = /\d/g;
    if (lname_length <= 2 || lname_length > 20) {
      $("#lname_err_msg").html("Last name must be between 2 and 20 characters ! ");
      $("#lname_err_msg").show();
      lname_err = true;
    } else {
      if (re.test(sec)) {
        $("#lname_err_msg").html("Last name must not contain digits ! ");
        $("#lname_err_msg").show();
        lname_err = true;
      } else {
        $("#lname_err_msg").hide();
      }
    }
  }



});

Answer 2

您的代码将快速修复以下内容。

    (function() {
            $("#username_err_msg").hide();
            $("#email_err_msg").hide();
            $("#pwd_err_msg").hide();
            $("#confirm_pwd_err_msg").hide();
            $("#fname_err_msg").hide();
            $("#lname_err_msg").hide();

            var username_err = false;
            var email_err = false;
            var pwd_err_msg = false;
            var confirm_pwd_err_msg = false;
            var fname_err = false;
            var lname_err = false;

            $("#userName").focusout(function() {
                check_userName();
            });
            $("#inputEmail").focusout(function() {
                check_email();
            });
            $("#password").focusout(function() {
                check_pwd();
            });
            $("#inputConfirmPassword").focusout(function() {
                check_pwd_conf();
            });
            $("#inputFirstName").focusout(function() {
                check_fname();
            });
            $("#inputLastName").focusout(function() {
                check_lname();
            });
            $("#formId").on("submit", checkForBlank);

            function check_userName() {
                var username_length = $("#userName").val().length;
                if (username_length < 5 || username_length > 20) {
                    $("#username_err_msg").html("Username must be between 5 and 20 characters ! ");
                    $("#username_err_msg").show();
                    username_err = true;
                } else {
                    $("#username_err_msg").hide();
                    username_err = false;
                }
            }

            function check_pwd() {
                var pass = $("#password").val();
                var pass_length = $("#password").val().length;
                //var re = /^[a-zA-Z_0-9@\!#\$\^%&*()+=\-[]\\\';,\.\/\{\}\|\":<>\? ]+$/;
                var re = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$/;
                //if pwd is less than 10 and doesnt contain special chars
                if (pass_length < 6) {
                    $("#pwd_err_msg").html("Weak ! ");
                    $("#pwd_err_msg").show();
                    pwd_err_msg = true;
                } else {
                    //if pwd is >= 5 or <= 10,and contains special char
                    if (pass_length >= 6 && pass_length < 9 && !re.test(pass)) {
                        $("#pwd_err_msg").html("Medium! ");
                        $("#pwd_err_msg").show();
                        pwd_err_msg = true;
                    } else {
                        //if pwd >11 and contains special char
                        if (pass_length >= 9 && !re.test(pass)) {
                            $("#pwd_err_msg").html("Strong! ");
                            $("#pwd_err_msg").show();
                            pwd_err_msg = true;
                        } else {
                            $("#pwd_err_msg").hide();
                            pwd_err_msg = false;
                        }
                    }
                }
            }

            function check_pwd_conf() {
                var pass1 = $("#password").val();
                var pass2 = $("#inputConfirmPassword").val();
                if (pass1 != pass2 || pass2.length === 0) {
                    $("#confirm_pwd_err_msg").html("Passwords don't match! ");
                    $("#confirm_pwd_err_msg").show();
                    confirm_pwd_err_msg = true;
                } else {
                    $("#confirm_pwd_err_msg").hide();
                    confirm_pwd_err_msg = false;
                }
            }

            function check_email() {
                var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
                var email = $("#inputEmail").val();
                if (re.test(email)) //valid email address
                {
                    $("#email_err_msg").hide();
                    email_err = false;
                } else {
                    $("#email_err_msg").html("Invalid email address!");
                    $("#email_err_msg").show();
                    email_err = true;
                }
            }

            function check_fname() {
                var fname_length = $("#inputFirstName").val().length;
                var first = $("#inputFirstName").val();
                var re = /\d/g;
                if (fname_length <= 2 || fname_length > 20) {
                    $("#fname_err_msg").html("First name must be between 2 and 20 characters ! ");
                    $("#fname_err_msg").show();
                    fname_err = true;
                } else {
                    if (re.test(first)) {
                        $("#fname_err_msg").html("First name must not contain digits ! ");
                        $("#fname_err_msg").show();
                        fname_err = true;
                    } else {
                        $("#fname_err_msg").hide();
                        fname_err = false;
                    }
                }
            }

            function check_lname() {
                var lname_length = $("#inputLastName").val().length;
                var sec = $("#inputLastName").val();
                var re = /\d/g;
                if (lname_length <= 2 || lname_length > 20) {
                    $("#lname_err_msg").html("Last name must be between 2 and 20 characters ! ");
                    $("#lname_err_msg").show();
                    lname_err = true;
                } else {
                    if (re.test(sec)) {
                        $("#lname_err_msg").html("Last name must not contain digits ! ");
                        $("#lname_err_msg").show();
                        lname_err = true;
                    } else {
                        $("#lname_err_msg").hide();
                        lname_err = false;
                    }
                }
            }

            function checkForBlank(e) {
                check_userName();
                check_email();
                check_pwd();
                check_pwd_conf();
                check_fname();
                check_lname();

                if(username_err || email_err || pwd_err_msg || confirm_pwd_err_msg || fname_err || lname_err) {
                    e.preventDefault();
                }
            }
        }());

我更改了checkForBlank函数。我已将其附加到表单提交事件并检查其中的任何错误。如果发现任何错误，则阻止表单提交。

但我认为整个代码需要重构以减少代码重复。

<强>更新

我对上面的代码进行了更改。 Here是工作的jsfiddle。

Answer 3

在此处下载js文件：https://onionfiles.com/file/HGGaFR2G

并将其包含在内，然后尝试此

$().ready(function() {
        // validate form on keyup and submit
        $("#FORMID").validate({
            rules: {
                username: "required",
                email: "required",
                password: "required",
                retype_pass: {
                    required: true,
                    equalTo:"#password"
                }
                first_name: "required",
                last_name: "required"
            },
            messages: {
                username: "Please enter Username",
                email : "Please enter a valid Email",
                password: "Please enter a password",
                retype_pass: {
                    required: "Please confirm your password",
                    equalTo: "Please enter the same password as above"
                },
                first_name: "Please enter first name",
                last_name: "Please enter last name"
            }
        });
    });

使用javascript进行表单验证，防止在发生错误时提交

3 个答案: