Discuss how to use JavaScript to verify registration information

With the development of the Internet, registration has become a task that many people must complete. It has become very common to register on websites and applications, and these registration processes require users to fill in a lot of personal information, such as username, password, email address, etc. In order to ensure the reliability and security of this information, we need to verify the registration information. In web development, JavaScript validation is widely used. In this article, we will discuss how to use JavaScript to verify registration information and add some special features.

Generally speaking, the front-end form validation process is triggered when it gains focus and loses focus. By using JavaScript, we can pop up a prompt message when the focus is gained, and perform corresponding verification when the focus is lost.

First, in the HTML markup, we need to create a form that contains the form element. The form element should contain an input field and a submit button. In this example, we will use a simple registration form as an example.

<form name="registerForm" onsubmit="return validateForm()" action="/submit-form" method="POST">
    <label>用户名:</label><input type="text" name="userName" required /><br />
    <label>密码:</label><input type="password" name="password" required /><br />
    <label>确认密码:</label><input type="password" name="rePassword" required /><br />
    <label>电子邮件:</label><input type="email" name="email" required /><br />
    <button type="submit">注册</button>
</form>

We can see some new attributes in the form element, such as "required" and "onsubmit". Among them, "required" means that the input box must be filled in before the form can be submitted, and "onsubmit" means the JavaScript function to be executed before submitting the form.

Next, we need to implement a JavaScript function to validate the form data. In this example, we will implement a function called validateForm(). This function will take the data entered in the form and do some validation.

function validateForm() {
  // Get the input data
  var username = document.forms["registerForm"]["userName"].value;
  var password = document.forms["registerForm"]["password"].value;
  var repassword = document.forms["registerForm"]["rePassword"].value;
  var email = document.forms["registerForm"]["email"].value;

  // Check username
  if (username == "") {
    alert("用户名不能为空！");
    document.forms["registerForm"]["userName"].focus();
    return false;
  }

  // Check password
  if (password == "") {
    alert("密码不能为空！");
    document.forms["registerForm"]["password"].focus();
    return false;
  }

  // Check confirm password
  if (repassword == "") {
    alert("确认密码不能为空！");
    document.forms["registerForm"]["rePassword"].focus();
    return false;
  } else {
    if (repassword != password) {
      alert("两次密码不匹配！");
      document.forms["registerForm"]["password"].value = "";
      document.forms["registerForm"]["rePassword"].value = "";
      document.forms["registerForm"]["password"].focus();
      return false;
    }
  }

  // Check email
  var emailReg = /^([\w-]+\.)*?[\w-]+@[\w-]+\.([\w-]+\.)*?[\w]+$/;
  if (email == "") {
    alert("电子邮件不能为空！");
    document.forms["registerForm"]["email"].focus();
    return false;
  } else if (!emailReg.test(email)) {
    alert("电子邮件格式不正确！");
    document.forms["registerForm"]["email"].value = "";
    document.forms["registerForm"]["email"].focus();
    return false;
  }

  // If all the data is correct, return true
  return true;
}

In this function, we use some simple validation conditions to check the correctness of the form data. For example, check if the username is empty, check if the password and confirm password are the same, check if the email is in the correct format, etc. If the input data does not meet the requirements, a warning message will pop up and false will be returned to prevent form submission. Returns true if all data meets the requirements.

Next, we need to add a JS function to perform corresponding operations on the input box gaining focus and losing focus.

// Add onfocus event
document.getElementsByName("userName")[0].onfocus = function() {
  document.getElementsByName("userName")[0].nextElementSibling.innerHTML = "请输入用户名";
};

document.getElementsByName("password")[0].onfocus = function() {
  document.getElementsByName("password")[0].nextElementSibling.innerHTML = "请输入密码";
};

document.getElementsByName("rePassword")[0].onfocus = function() {
  document.getElementsByName("rePassword")[0].nextElementSibling.innerHTML = "请再次输入密码";
};

document.getElementsByName("email")[0].onfocus = function() {
  document.getElementsByName("email")[0].nextElementSibling.innerHTML = "请输入电子邮件地址";
};

// Add onblur event
document.getElementsByName("userName")[0].onblur = function() {
  if (document.getElementsByName("userName")[0].value == "") {
    document.getElementsByName("userName")[0].nextElementSibling.innerHTML = "用户名不能为空！";
  } else {
    document.getElementsByName("userName")[0].nextElementSibling.innerHTML = "";
  }
};

document.getElementsByName("password")[0].onblur = function() {
  if (document.getElementsByName("password")[0].value == "") {
    document.getElementsByName("password")[0].nextElementSibling.innerHTML = "密码不能为空！";
  } else {
    document.getElementsByName("password")[0].nextElementSibling.innerHTML = "";
  }
};

document.getElementsByName("rePassword")[0].onblur = function() {
  if (document.getElementsByName("rePassword")[0].value == "") {
    document.getElementsByName("rePassword")[0].nextElementSibling.innerHTML = "确认密码不能为空！";
  } else if (document.getElementsByName("rePassword")[0].value != document.getElementsByName("password")[0].value) {
    document.getElementsByName("rePassword")[0].nextElementSibling.innerHTML = "两次密码不匹配！";
  } else {
    document.getElementsByName("rePassword")[0].nextElementSibling.innerHTML = "";
  }
};

document.getElementsByName("email")[0].onblur = function() {
  var email = document.getElementsByName("email")[0].value;
  var emailReg = /^([\w-]+\.)*?[\w-]+@[\w-]+\.([\w-]+\.)*?[\w]+$/;

  if (email == "") {
    document.getElementsByName("email")[0].nextElementSibling.innerHTML = "电子邮件不能为空！";
  } else if (!emailReg.test(email)) {
    document.getElementsByName("email")[0].nextElementSibling.innerHTML = "电子邮件格式不正确！";
  } else {
    document.getElementsByName("email")[0].nextElementSibling.innerHTML = "";
  }
};

In these codes, we have added event handlers for each input field. When the focus is obtained, a prompt message is displayed; after the focus is lost, the verification result is displayed. For example, when entering a user name, "Please enter user name" will be displayed next to the text box, and a specific error message will be displayed when the input is incorrect.

Finally, we can put these codes together to form a complete example:

<form name="registerForm" onsubmit="return validateForm()" action="/submit-form" method="POST">
    <label>用户名:</label><input type="text" name="userName" required /><span></span><br />
    <label>密码:</label><input type="password" name="password" required /><span></span><br />
    <label>确认密码:</label><input type="password" name="rePassword" required /><span></span><br />
    <label>电子邮件:</label><input type="email" name="email" required /><span></span><br />
    <button type="submit">注册</button>
</form>

<script>
  // Add onfocus event
  document.getElementsByName("userName")[0].onfocus = function() {
    document.getElementsByName("userName")[0].nextElementSibling.innerHTML = "请输入用户名";
  };

  document.getElementsByName("password")[0].onfocus = function() {
    document.getElementsByName("password")[0].nextElementSibling.innerHTML = "请输入密码";
  };

  document.getElementsByName("rePassword")[0].onfocus = function() {
    document.getElementsByName("rePassword")[0].nextElementSibling.innerHTML = "请再次输入密码";
  };

  document.getElementsByName("email")[0].onfocus = function() {
    document.getElementsByName("email")[0].nextElementSibling.innerHTML = "请输入电子邮件地址";
  };

  // Add onblur event
  document.getElementsByName("userName")[0].onblur = function() {
    if (document.getElementsByName("userName")[0].value == "") {
      document.getElementsByName("userName")[0].nextElementSibling.innerHTML = "用户名不能为空！";
    } else {
      document.getElementsByName("userName")[0].nextElementSibling.innerHTML = "";
    }
  };

  document.getElementsByName("password")[0].onblur = function() {
    if (document.getElementsByName("password")[0].value == "") {
      document.getElementsByName("password")[0].nextElementSibling.innerHTML = "密码不能为空！";
    } else {
      document.getElementsByName("password")[0].nextElementSibling.innerHTML = "";
    }
  };

  document.getElementsByName("rePassword")[0].onblur = function() {
    if (document.getElementsByName("rePassword")[0].value == "") {
      document.getElementsByName("rePassword")[0].nextElementSibling.innerHTML = "确认密码不能为空！";
    } else if (document.getElementsByName("rePassword")[0].value != document.getElementsByName("password")[0].value) {
      document.getElementsByName("rePassword")[0].nextElementSibling.innerHTML = "两次密码不匹配！";
    } else {
      document.getElementsByName("rePassword")[0].nextElementSibling.innerHTML = "";
    }
  };

  document.getElementsByName("email")[0].onblur = function() {
    var email = document.getElementsByName("email")[0].value;
    var emailReg = /^([\w-]+\.)*?[\w-]+@[\w-]+\.([\w-]+\.)*?[\w]+$/;

    if (email == "") {
      document.getElementsByName("email")[0].nextElementSibling.innerHTML = "电子邮件不能为空！";
    } else if (!emailReg.test(email)) {
      document.getElementsByName("email")[0].nextElementSibling.innerHTML = "电子邮件格式不正确！";
    } else {
      document.getElementsByName("email")[0].nextElementSibling.innerHTML = "";
    }
  };

  function validateForm() {
    // Get the input data
    var username = document.forms["registerForm"]["userName"].value;
    var password = document.forms["registerForm"]["password"].value;
    var repassword = document.forms["registerForm"]["rePassword"].value;
    var email = document.forms["registerForm"]["email"].value;

    // Check username
    if (username == "") {
      alert("用户名不能为空！");
      document.forms["registerForm"]["userName"].focus();
      return false;
    }

    // Check password
    if (password == "") {
      alert("密码不能为空！");
      document.forms["registerForm"]["password"].focus();
      return false;
    }

    // Check confirm password
    if (repassword == "") {
      alert("确认密码不能为空！");
      document.forms["registerForm"]["rePassword"].focus();
      return false;
    } else {
      if (repassword != password) {
        alert("两次密码不匹配！");
        document.forms["registerForm"]["password"].value = "";
        document.forms["registerForm"]["rePassword"].value = "";
        document.forms["registerForm"]["password"].focus();
        return false;
      }
    }

    // Check email
    var emailReg = /^([\w-]+\.)*?[\w-]+@[\w-]+\.([\w-]+\.)*?[\w]+$/;
    if (email == "") {
      alert("电子邮件不能为空！");
      document.forms["registerForm"]["email"].focus();
      return false;
    } else if (!emailReg.test(email)) {
      alert("电子邮件格式不正确！");
      document.forms["registerForm"]["email"].value = "";
      document.forms["registerForm"]["email"].focus();
      return false;
    }

    // If all the data is correct, return true
    return true;
  }
</script>

The above is the process of verifying registration information using JavaScript. Through this example, we can see that front-end verification can greatly improve user experience and data security. Therefore, in web development, front-end form verification and back-end data verification go hand in hand to achieve a complete verification system.

The above is the detailed content of Discuss how to use JavaScript to verify registration information. For more information, please follow other related articles on the PHP Chinese website!