Of Stack

JavaScript Realizes Form Verification

  • 2021-10-13 06:06:23
  • OfStack

In this paper, we share the specific code of JavaScript to realize the form verification function for your reference. The specific contents are as follows

The following is the form validation function of JavaScript, which can write the code of HTML and CSS you want according to JS code.

About the use of regular expressions, and commonly used regular expressions, the author is still in the process of finishing. After finishing the post-finishing, the link will be placed below for everyone to learn. 


//1. Declare variables 
var emailObj;
var usernameObj;
var passwordObj;
var confirmObj;
var emailMsg;
var usernameMsg;
var passwordMsg;
var confirmMsg;
// After the page loads, get the objects in the page 
window.onload = function() {
  emailObj = document.getElementById("email");
  usernameObj = document.getElementById("username");
  passwordObj = document.getElementById("password");
  confirmObj = document.getElementById("confirm");
  emailMsg = document.getElementById("emaileMsg");
  usernameMsg = document.getElementById("usernameMsg");
  confirmMsg = document.getElementById("confirmMsg");
};
//3. Verify the entire form 
function checkForm() {
  var bEmail = checkEmail();
  var bUsername = checkUsername();
  var bPassword = checkPassword();
  var bConfirm = checkCondfirm();
  return bUsername && bPassword && bConfirm && bEmail;
}
//4. Verify mailbox 
function checkEmail() {
  var regex = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
  var value = emailObj.value;
  var msg = "";
  if(!value) {
    msg = " Mailbox must be filled in ";
  } else if (!regex.test(value)) {
    msg = " Illegal mailbox format ";
  }
  emailMsg.innerHTML = msg;
  emailObj.parentNode.parentNode.style.color = msg == ""?"black":"red";
  return msg == "";
}
//5. Verify user name ' 
function checkUsername() {
  var regex = /^[a-zA-Z0-9_-]\w{0,9}$/;  // Alphanumeric underline 1-10 Bit, cannot start with a number 
  var value = usernameObj.value;     // Get usernameObj Text in 
  var msg = "";              // The last hint is small, which is empty by default 
  // If the user name is null Or "",!value The value of is false If it is not empty,  !value Value is true
  if(!value) {
    msg = " User name must be filled in ";
  } else if (regex.test(value)) {
    msg = " Illegal User Name ";
  }
  usernameMsg.innerHTML = msg;
  usernameObj.parentNode.parentNode.style.color = msg == ""?"black":"red";
  return msg == "";            // If the prompt message is empty, it means that there is no error and returns true
}
//6. Verify password 
function checkPassword() {
  var regex = /^.{6,16}$/;      // Any character, 6-16 Bit 
  var value = passwordObj.value;
  var msg = "";
  if(!value) {
    msg = " Password must be filled in ";
  } else if (!regex.test(value)) {
    msg = " Illegal password ";
  }
  passwordMsg.parentNode.parentNode.style.color = msg == ""?"black":"red";
  return msg == "";
}
//7. Verify the confirmation password 
function checkCondfirm() {
  var passwordValue = passwordObj.value;
  var confirmValue = confirmObj.value;
  var msg = "";
  if(!confirmValue) {
    msg = " Confirm password filling ";
  } else if (passwordValue != confirmValue) {
    msg = " Password must be kept 1 To ";
  confirmMsg.innerHTML = msg;
  confirmObj.parentNode.parentNode.style.color = msg == ""?"black":"red";
  return msg == "";
}

The following code is simple to test whether the mailbox matches successfully, and the specific logic can be realized according to the following 


<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <input type="text" placeholder=" Please enter the mailbox " id="email">
</body>
<script>
 email.onchange = function(){
 var email = this.value;
 var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
 if(reg.test(email)){
  alert(" Mailbox Format Correct ");
 }else{
  alert(" The mailbox format is incorrect ");
 }
 }
</script>
</html>
Related articles: