为什么我的JavaScript验证无效？

时间：2018-09-23 06:52:15

标签： javascript php

我想用JavaScript和PHP验证我的注册表格。问题是我的JavaScript验证无法正常工作。单击带有用户名，密码和电子邮件的注册按钮后，我的JavaScript没有收到任何错误。但是我的PHP验证工作正常。我的代码有什么问题？ 

var username = document.forms['vform']['username'];
var email = document.forms['vform']['email'];
var password = document.forms['vform']['password_1'];
var password_confirm = document.forms['vform']['password_2'];
// SELECTING ALL ERROR DISPLAY ELEMENTS
var name_error = document.getElementById('name_error');
var email_error = document.getElementById('email_error');
var password_error = document.getElementById('password_error');
// SETTING ALL EVENT LISTENERS
username.addEventListener('blur', nameVerify, true);
email.addEventListener('blur', emailVerify, true);
password.addEventListener('blur', passwordVerify, true);
// validation function
function Validate() {
  // validate username
  if (username.value == "") {
    username.style.border = "1px solid red";
    document.getElementById('username_div').style.color = "red";
    name_error.textContent = "Usernames is required";
    username.focus();
    return false;
  }
  // validate username
  if (username.value.length < 3) {
    username.style.border = "1px solid red";
    document.getElementById('username_div').style.color = "red";
    name_error.textContent = "Username must be at least 3 characters";
    username.focus();
    return false;
  }
  // validate email
  if (email.value == "") {
    email.style.border = "1px solid red";
    document.getElementById('email_div').style.color = "red";
    email_error.textContent = "Emails is required";
    email.focus();
    return false;
  }
  // validate password
  if (password.value == "") {
    password.style.border = "1px solid red";
    document.getElementById('password_div').style.color = "red";
    password_confirm.style.border = "1px solid red";
    password_error.textContent = "Passwords is required";
    password.focus();
    return false;
  }
  // check if the two passwords match
  if (password.value != password_confirm.value) {
    password.style.border = "1px solid red";
    document.getElementById('pass_confirm_div').style.color = "red";
    password_confirm.style.border = "1px solid red";
    password_error.innerHTML = "The two passwords do not match";
    return false;
  }
}
// event handler functions
function nameVerify() {
  if (username.value != "") {
   username.style.border = "1px solid #5e6e66";
   document.getElementById('username_div').style.color = "#5e6e66";
   name_error.innerHTML = "";
   return true;
  }
}
function emailVerify() {
  if (email.value != "") {
  	email.style.border = "1px solid #5e6e66";
  	document.getElementById('email_div').style.color = "#5e6e66";
  	email_error.innerHTML = "";
  	return true;
  }
}
function passwordVerify() {
  if (password.value != "") {
  	password.style.border = "1px solid #5e6e66";
  	document.getElementById('pass_confirm_div').style.color = "#5e6e66";
  	document.getElementById('password_div').style.color = "#5e6e66";
  	password_error.innerHTML = "";
  	return true;
  }
  if (password.value === password_confirm.value) {
  	password.style.border = "1px solid #5e6e66";
  	document.getElementById('pass_confirm_div').style.color = "#5e6e66";
  	password_error.innerHTML = "";
  	return true;
  }
}
<?php include('server.php') ?>
<!DOCTYPE html>
<html>
<head>
  <title>Registration system PHP and MySQL</title>
  <!-- <link rel="stylesheet" type="text/css" href="style.css"> -->
</head>

<body>
  <div class="header">
    <h2>Register</h2>
  </div>
  
  <form method="post" action="register.php" onsubmit="return Validate()" name="vform">
    <?php include('errors.php'); ?>

    <div class="input-group" id="username_div">
      <label>Username</label>
      <input type="text" name="username" class="textInput" value="<?php echo $username; ?>">
      <div id="name_error"></div>
    </div>
    <div class="input-group" id="email_div">
      <label>Email</label>
      <input type="email" name="email" class="textInput" value="<?php echo $email; ?>">
      <div id="email_error"></div>
    </div>
    <div class="input-group" id="password_div">
      <label>Password</label>
      <input type="password" class="textInput" name="password_1">
    </div>
    <div class="input-group" id="pass_confirm_div">
      <label>Confirm password</label>
      <input type="password" class="textInput" name="password_2">
      <div id="password_error"></div>
    </div>
    <div class="input-group">
      <input type="submit" name="register" value="Register" class="btn">
    </div>
    <p>
      Already a member? <a href="login.php">Sign in</a>
    </p>
  </form>
</body>
</html>
<script type="scripts.js"></script>

1 个答案:

答案 0 :(得分：0)

您可以尝试

var username = document.forms['vform']['username'];
    var email = document.forms['vform']['email'];
    var password = document.forms['vform']['password_1'];
    var password_confirm = document.forms['vform']['password_2'];
    // SELECTING ALL ERROR DISPLAY ELEMENTS
    var name_error = document.getElementById('name_error');
    var email_error = document.getElementById('email_error');
    var password_error = document.getElementById('password_error');
    // SETTING ALL EVENT LISTENERS
    username.addEventListener('blur', nameVerify, true);
    email.addEventListener('blur', emailVerify, true);
    password.addEventListener('blur', passwordVerify, true);
    // validation function
    
    var isValidate=true;
    
    function Validate() {
      // validate username
      if (username.value == "") {
        username.style.border = "1px solid red";
        document.getElementById('username_div').style.color = "red";
        name_error.textContent = "Usernames is required";
        username.focus();
        isValidate&=false;
      }
      // validate username
      if (username.value.length < 3) {
        username.style.border = "1px solid red";
        document.getElementById('username_div').style.color = "red";
        name_error.textContent = "Username must be at least 3 characters";
        username.focus();
        isValidate&=false;
      }
      // validate email
      if (email.value == "") {
        email.style.border = "1px solid red";
        document.getElementById('email_div').style.color = "red";
        email_error.textContent = "Emails is required";
        email.focus();
        isValidate&=false;
      }
      // validate password
      if (password.value == "") {
        password.style.border = "1px solid red";
        document.getElementById('password_div').style.color = "red";
        password_confirm.style.border = "1px solid red";
        password_error.textContent = "Passwords is required";
        password.focus();
        isValidate&=false;
      }
      // check if the two passwords match
      if (password.value != password_confirm.value) {
        password.style.border = "1px solid red";
        document.getElementById('pass_confirm_div').style.color = "red";
        password_confirm.style.border = "1px solid red";
        password_error.innerHTML = "The two passwords do not match";
        isValidate&=false;
      }
      return !(!isValidate);
    }
    // event handler functions
    function nameVerify() {
      if (username.value != "") {
       username.style.border = "1px solid #5e6e66";
       document.getElementById('username_div').style.color = "#5e6e66";
       name_error.innerHTML = "";
       return true;
      }
    }
    function emailVerify() {
      if (email.value != "") {
      	email.style.border = "1px solid #5e6e66";
      	document.getElementById('email_div').style.color = "#5e6e66";
      	email_error.innerHTML = "";
      	return true;
      }
    }
    function passwordVerify() {
      if (password.value != "") {
      	password.style.border = "1px solid #5e6e66";
      	document.getElementById('pass_confirm_div').style.color = "#5e6e66";
      	document.getElementById('password_div').style.color = "#5e6e66";
      	password_error.innerHTML = "";
      	return true;
      }
      if (password.value === password_confirm.value) {
      	password.style.border = "1px solid #5e6e66";
      	document.getElementById('pass_confirm_div').style.color = "#5e6e66";
      	password_error.innerHTML = "";
      	return true;
      }
    }
   
      <div class="header">
        <h2>Register</h2>
      </div>
      
      <form method="post" action="register.php" onsubmit="return Validate()" name="vform">
        <?php include('errors.php'); ?>

        <div class="input-group" id="username_div">
          <label>Username</label>
          <input type="text" name="username" class="textInput" value="<?php echo $username; ?>">
          <div id="name_error"></div>
        </div>
        <div class="input-group" id="email_div">
          <label>Email</label>
          <input type="email" name="email" class="textInput" value="<?php echo $email; ?>">
          <div id="email_error"></div>
        </div>
        <div class="input-group" id="password_div">
          <label>Password</label>
          <input type="password" class="textInput" name="password_1">
        </div>
        <div class="input-group" id="pass_confirm_div">
          <label>Confirm password</label>
          <input type="password" class="textInput" name="password_2">
          <div id="password_error"></div>
        </div>
        <div class="input-group">
          <input type="submit" name="register" value="Register" class="btn">
        </div>
        <p>
          Already a member? <a href="login.php">Sign in</a>
        </p>
      </form>

相关问题
最新问题