Question

我无法使用jQuery验证我的注册表单。

当我点击提交按钮时，它直接将我带到操作文件，即registeraction.php，而不验证表单字段。

这是我的HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HOME
    </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css" type="text/css"></link>
</head>
<body>
    <div class="container">
        <h1>Registration Form</h1>
        <form id="registration" name="registration" action="registeraction.php" method="post">
            <table align="center" class="table">
                <tr>
                    <td><label>Username</label></td><td><input type="text" class="error" id="uname" name="uname" placeholder="Username" /></td>
                </tr>
                <tr>
                    <td><label>Email</label></td><td><input type="email" class="error" id="email" name="pwd" placeholder="Email" /></td>
                </tr>
                <tr>
                    <td><label>Password</label></td><td><input type="password" class="error" id="email" name="email" placeholder="Password" /></td>
                <tr>
                <tr>
                    <td colspan="2"><input type="submit" value="SUBMIT" id="submit" name="submit" /></td>
                </tr>
            </table>                
        </form>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>        
    <script src="register_formValidate.js"></script>
</body>

这是我的register_formValidate.js代码

$(document).ready(function() {
  $('#registration').validate({
    rules: {
      uname: {
        required: true, //Required username
        minlength: 6 //Username must be of at least 6 chars
      },
      email: {
        required: true, //Required email
        email: true //Validate email using built in email validation
      },
      password: {
        required: true, //Required password
        minlength: 6 //Password must be of at least 6 chars
      }
    },

    messages: {
      uname: {
        required: "Please enter username",
        minlength: "Username must be at least 6 characters long"
      },
      email: {
        required: "Please enter email",
        email: "Please enter a valid email"
      },
      password: {
        required: "Please enter password",
        minlength: "Password must be at least 6 characters long"
      }
    },

    submitHandler: function(form) {
      alert("Form submitted successfully")
      form.submit();
    }
  });
});

请告诉我我做错了什么。提前谢谢。

Answer 1

首先在jquery validate之前导入Jquery然后您为输入设置了错误的ID（重复id=email），只需更正下面的代码段（设置正确的ID（unme，电子邮件和密码）作为您的js验证文件规则名称）：

$(document).ready(function() {
  $('#registration').validate({
    rules: {
      uname: {
        required: true, //Required username
        minlength: 6 //Username must be of at least 6 chars
      },
      email: {
        required: true, //Required email
        email: true //Validate email using built in email validation
      },
      password: {
        required: true, //Required password
        minlength: 6 //Password must be of at least 6 chars
      }
    },

    messages: {
      uname: {
        required: "Please enter username",
        minlength: "Username must be at least 6 characters long"
      },
      email: {
        required: "Please enter email",
        email: "Please enter a valid email"
      },
      password: {
        required: "Please enter password",
        minlength: "Password must be at least 6 characters long"
      }
    },

    submitHandler: function(form) {
      alert("Form submitted successfully")
      form.submit();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>	
<div class="container">
  <h1>Registration Form</h1>
  <form id="registration" name="registration" action="registeraction.php" method="post">
    <table align="center" class="table">
      <tr>
        <td><label>Username</label></td>
        <td><input type="text" class="error" id="uname" name="uname" placeholder="Username" /></td>
      </tr>
      <tr>
        <td><label>Email</label></td>
        <td><input type="email" class="error" id="email" name="email" placeholder="Email" /></td>
      </tr>
      <tr>
        <td><label>Password</label></td>
        <td><input type="password" class="error" id="password" name="password" placeholder="Password" /></td>
        <tr>
          <tr>
            <td colspan="2"><input type="submit" value="SUBMIT" id="submit" name="submit" /></td>
          </tr>
    </table>
  </form>
</div>

无法使用jQuery验证注册表单

1 个答案: