Native js to implement form validation function

When developing, analyzing the functions step by step and then implementing them can help you keep a clear mindset.

1. Get the form elements and text box elements as follows:
2. Bind the submit event to the form element for verification when the submit button is clicked.
3. First declare related variables in the function and get the value of the text box. The bPass variable is used to determine whether the verification can be passed; the sPrompt variable is the prompt text; and the sValue variable is the value of the text box. As shown below:
4. Do not allow text boxes to be empty. Determine whether sValue is an empty string. If it is, display a prompt after the text box and activate the text box. It is also necessary to prevent subsequent operations and default behaviors. The code is as follows:
5. Determine whether the input value meets the rules, that is, only English letters and no other characters. Declare a regular expression here to determine whether they are all English letters. As shown below:
6. Based on the regular expression result, the submission is passed or blocked.
7. When entering content in the text box, you should delete the following prompt, as shown below:

Modify the js code again:

1. Get the form elements and all text boxes as follows:
2. Encapsulate a validation function and pass in three parameters: elem is the text box element, reg is the regular expression, and text is the prompt keyword. As shown below:
3. Bind the submit event on the form element as follows:
4. Bind the input event to the eFormContainer element to delete the prompt text during input.

Form validation is one of the most common functions of web front-end and is also a basic skill of front-end development. Completing the development of a form validation by yourself can also help deepen your understanding of string processing and regular expressions.

Basic form verification includes: letter verification, number verification, letter and number verification, Chinese character verification, password verification, date verification, mobile phone verification, email verification, password verification, etc.

Now let's finish writing these verification codes. First, let's see how the letters are verified. First write the required HTML code, create a form element with the id of formContainer, add a text box and button that need to verify the English letters, and a span element is needed after the text box to store the prompt text. As shown below:

<form action="" class="form_Box" id="formContainer">
 <dl>
  <dt>English letters:</dt>
  <dd><input type="text" id="verifyEn"><span></span></dd>
  <dd>
  <input type="submit" value="Submit" class="btn submit">
  <input type="reset" value="Reset" class="btn reset">
  </dd>
 </dl>
 </form>

When developing, analyzing the functions step by step and then implementing them can help you keep a clear mindset.

1. Get the form elements and text box elements as follows:

var eFormContainer = document.getElementById('formContainer');
var eVerifyEn = document.getElementById('verifyEn');

2. Bind the submit event to the form element for verification when the submit button is clicked.

eFormContainer.addEventListener('submit',function(event){
 
});

This example requires that when the verification is passed, a prompt will pop up to indicate that the verification has passed; if the verification fails, the cursor is positioned in the text box, and a prompt indicating that the verification failed is displayed after the text box. Next, let’s see how to do it in the submit event function.

3. First declare related variables in the function and get the value of the text box. The bPass variable is used to determine whether the verification can be passed; the sPrompt variable is the prompt text; and the sValue variable is the value of the text box. As shown below:

eFormContainer.addEventListener('submit',function(event){
 var bPass = false;
 var sPrompt = '';
 var sValue = eVerifyEn.value;
});

4. Do not allow text boxes to be empty. Determine whether sValue is an empty string. If it is, display a prompt after the text box and activate the text box. It is also necessary to prevent subsequent operations and default behaviors. The code is as follows:

eFormContainer.addEventListener('submit',function(){
 /* ... */
 
 if(sValue.trim()==''){
  //Modify the prompt text sPrompt = 'English letters cannot be empty!';
  //The cursor is positioned in the letter text box eVerifyEn.focus();
  //Display prompt text after the text box //Get the parent element of the text box let eParent = eVerifyEn.parentElement;
  //Get the span element that stores the prompt let eSpan = eParent.getElementsByTagName('span')[0];
  //Add prompt to span element eSpan.innerHTML = sPrompt;
  //Prevent form submission event.preventDefault();
  //Prevent the execution of subsequent code return;
 }
 
});

5. Determine whether the input value meets the rules, that is, only English letters and no other characters. Declare a regular expression here to determine whether they are all English letters. As shown below:

eFormContainer.addEventListener('submit',function(){
 /* ... */
 
 //Declare regular expression and check whether the string is all English letters let reg = /^[a-zA-Z]+$/;
 bPass = reg.test(sValue);
 
});

6. Based on the regular expression result, the submission is passed or blocked.

eFormContainer.addEventListener('submit',function(){
 /* ... */
 
 if(bPass){
  //Pop up the prompt alert('Pass verification');
 }else{
  //Modify the prompt text sPrompt = 'Only English letters can be entered!';
  //The cursor is positioned in the letter text box eVerifyEn.focus();
  //Display prompt text after the text box //Get the parent element of the text box let eParent = eVerifyEn.parentElement;
  //Get the span element that stores the prompt let eSpan = eParent.getElementsByTagName('span')[0];
  //Add prompt to span element eSpan.innerHTML = sPrompt;
  //Prevent form submission event.preventDefault();
 }
 
});

7. When entering content in the text box, you should delete the following prompt, as shown below:

//Bind the input event on the eFormContainer element and delegate all the input events of the text boxes to the eFormContainer element.
 // The advantage of doing this is that you don't need to add events to every text box.
 eFormContainer.addEventListener('input',function(event){
 //Get the current text box let eInput = event.target;
 //Get the parent element of the text box let eParent = eInput.parentElement;
 //Get the span element that stores the prompt let eSpan = eParent.getElementsByTagName('span')[0];
 // Clear prompt eSpan.innerHTML = '';
 });

The complete javascript code at this time is as follows:

function fnFormVerify(){
 // Get the form element var eFormContainer = document.getElementById('formContainer');
 // Get the verification letter text box var eVerifyEn = document.getElementById('verifyEn');
 // Bind the submit event to the form element eFormContainer.addEventListener('submit',function(){
  //Declare the bPass variable to determine whether the verification is passed var bPass = false;
  //Declare the sPrompt variable for prompt text var sPrompt = '';
  // Get the value of the letter text box, make sure it is not empty, and then determine whether the value contains non-English letters. The code is as follows:
  var sValue = eVerifyEn.value;
  // Ensure that it is not equal to empty if (sValue.trim() == '') {
  //Modify the prompt text sPrompt = 'English letters cannot be empty!';
  //The cursor is positioned in the letter text box eVerifyEn.focus();
  //Display prompt text after the text box //Get the parent element of the text box let eParent = eVerifyEn.parentElement;
  //Get the span element that stores the prompt let eSpan = eParent.getElementsByTagName('span')[0];
  //Add prompt to span element eSpan.innerHTML = sPrompt;
  //Prevent form submission event.preventDefault();
  //Prevent the execution of subsequent code return;
  }

  //Declare regular expression and check whether the string is all English letters let reg = /^[a-zA-Z]+$/;
  bPass = reg.test(sValue);
  if(bPass){
  //Pop up the prompt alert('Pass verification');
  }else{
  //Modify the prompt text sPrompt = 'Only English letters can be entered!';
  //The cursor is positioned in the letter text box eVerifyEn.focus();
  //Display prompt text after the text box //Get the parent element of the text box let eParent = eVerifyEn.parentElement;
  //Get the span element that stores the prompt let eSpan = eParent.getElementsByTagName('span')[0];
  //Add prompt to span element eSpan.innerHTML = sPrompt;
  //Prevent form submission event.preventDefault();
  }
 });

 //Bind the input event on the eFormContainer element and delegate all the input events of the text boxes to the eFormContainer element.
 // The advantage of doing this is that you don't need to add events to every text box.
 eFormContainer.addEventListener('input',function(event){
  //Get the current text box let eInput = event.target;
  //Get the parent element of the text box let eParent = eInput.parentElement;
  //Get the span element that stores the prompt let eSpan = eParent.getElementsByTagName('span')[0];
  // Clear prompt eSpan.innerHTML = '';
 });
 }
 fnFormVerify();

The effect is as shown below:

Then we also need to complete digital verification, letter and number verification, Chinese character verification, password verification, date verification, mobile phone verification, email verification, password, etc. If every verification is written like this, it will be cumbersome and there will be more code. Therefore, it is necessary to encapsulate a string verification function and return the verification result. When submitting, each text box is called in turn.

Add the following html elements:

<form action="" class="form_Box" id="formContainer">
 <dl>
 <dt>English letters:</dt>
 <dd><input type="text" id="verifyEn"><span></span></dd>
 <dt>English and numbers:</dt>
 <dd><input type="text" id="verifyEnNum"><span></span></dd>
 <dt>Number:</dt>
 <dd><input type="text" id="verifyNum"><span></span></dd>
 <dt>Chinese characters:</dt>
 <dd><input type="text" id="verifyCn"><span></span></dd>
 <dt>Date:</dt>
 <dd><input type="text" id="verifyDate"><span></span></dd>
 <dt>Email:</dt>
 <dd><input type="text" id="verifyEmail"><span></span></dd>
 <dt>Mobile phone:</dt>
 <dd><input type="text" id="verifyPhone"><span></span></dd>
 <dt>Password:</dt>
 <dd><input type="password" id="verifyPwd"><span></span></dd>
 <dt>Confirm Password:</dt>
 <dd><input type="password" id="verifyForPwd"><span></span></dd>
 <dt></dt>
 <dd>
  <input type="submit" value="Submit" class="btn submit">
  <input type="reset" value="Reset" class="btn reset">
 </dd>
 </dl>
</form>

Modify the js code again:

1. Get the form elements and all text boxes as follows:

// Get the form element var eFormContainer = document.getElementById('formContainer');
 // Get the verification letter text box var eVerifyEn = document.getElementById('verifyEn');
 // Get the English and digital text boxes var eVerifyEnNum = document.getElementById('verifyEnNum');
 // Get the digital text box var eVerifyNum = document.getElementById('verifyNum');
 // Get the Chinese character text box var eVerifyCn = document.getElementById('verifyCn');
 // Get the date text box var eVerifyDate = document.getElementById('verifyDate');
 // Get the email text box var eVerifyEmail = document.getElementById('verifyEmail');
 // Get the phone text box var eVerifyPhone = document.getElementById('verifyPhone');
 // Get the password text box var eVerifyPwd = document.getElementById('verifyPwd');
 // Get the confirmation password text box var eVerifyForPwd = document.getElementById('verifyForPwd');

2. Encapsulate a validation function and pass in three parameters: elem is the text box element, reg is the regular expression, and text is the prompt keyword. As shown below:

function fnVerify(elem,reg,text){
 //Get the characters entered in the text box var sValue = elem.value;
 //Get the parent element of the text box let eParent = elem.parentElement;
 //Get the span element that stores the prompt let eSpan = eParent.getElementsByTagName('span')[0];

 //Judge whether the text box character is empty if (sValue.trim() == '') {
 //The cursor is positioned on the text box elem.focus();
 //Display the prompt text after the text box eSpan.innerHTML = text + 'Cannot be empty!';
 //Return false
 return false;
 }

 // Determine whether the string meets the rules if(reg.test(sValue)){
 //If it matches, return true
 return true;
 }else{
 //The cursor is positioned on the text box elem.focus();
 //Display the prompt text after the text box eSpan.innerHTML = text + 'Incorrect format!';
 //If it does not match, return false
 return false;
 }
}

3. Bind the submit event on the form element as follows:

eFormContainer.addEventListener('submit',function(event){
 //Declare the bPass variable to determine whether the verification is passed var bPass = false;
 
 //Verify text box format one by one bPass = fnVerify(eVerifyEn,/^[a-zA-Z]+$/,'English letters') &&
   fnVerify(eVerifyEnNum,/^[a-zA-Z0-9]*$/,'English and numbers') &&
   fnVerify(eVerifyNum,/^\d*$/,'number') &&
   fnVerify(eVerifyCn,/^[\u0391-\uFFE5]+$/,'Chinese characters') &&
   fnVerify(eVerifyDate,/^(\d{2}|\d{4})-\d{1,2}-\d{1,2}$/,'date') &&
   fnVerify(eVerifyEmail,/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/,'Email') &&
   fnVerify(eVerifyPhone,/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/,'手机') &&
   fnVerify(eVerifyPwd,/^[\w!@#$%^&*?\(\)]{6,16}$/,'password');

 //Confirm the password to be consistent with the password, add a separate verification if (eVerifyPwd.value !== eVerifyForPwd.value) {
 //Get the parent element for confirming the password let eParent = eVerifyForPwd.parentElement;
 //Get the prompt span element let eSpan = eParent.getElementsByTagName('span')[0];
 //Prompt error eSpan.innerHTML = 'Confirm password must be consistent with password';
 //Activate the confirm password input box eVerifyForPwd.focus();
 //Prevent subsequent operations bPass = false;
 }

 if(bPass){
 //Pop up the prompt alert('Pass verification');
 event.preventDefault(); //This line cannot be used for actual work. It is used here to prevent the default behavior of the form.
 }else{
 //Prevent form submission event.preventDefault();
 }
 
});

There is another problem that needs to be solved. When entering content in the text box, you should delete the prompt behind it. Otherwise, it is abnormal to get an error prompt even if the input is correct.

4. Bind the input event to the eFormContainer element to delete the prompt text during input.

eFormContainer.addEventListener('input',function(event){
 //Get the current text box let eInput = event.target;
 //Get the parent element of the text box let eParent = eInput.parentElement;
 //Get the span element that stores the prompt let eSpan = eParent.getElementsByTagName('span')[0];
 // Clear prompt eSpan.innerHTML = '';
});

At this point, a complete form validation page is basically completed; this example tutorial uses the submit form event, but in current actual development, it is rare to submit the form directly in this way. This statement is made to avoid misleading readers.

The above is the details of how to implement form validation in native js. For more information about js form validation, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:

JavaScript form validation example
Native js implements regular validation of the form (submit only after validation)
Implementing form validation with JavaScript
JS simple form validation function complete example
Example code for using JavaScript to validate a form using form elements
JavaScript implements form registration, form validation, and operator functions
A complete example of simple form validation implemented by JS
Simple form validation function example implemented by JS
JavaScript basic form validation example (pure Js implementation)
Implementing form validation with JavaScript

<<: InnoDB engine redo file maintenance method

>>: A brief discussion on the issue of dates containing zero values in MySQL database

Implementation steps of mysql master-slave replication

Table of contents

When developing, analyzing the functions step by step and then implementing them can help you keep a clear mindset.

1. Get the form elements and text box elements as follows:

2. Bind the submit event to the form element for verification when the submit button is clicked.

3. First declare related variables in the function and get the value of the text box. The bPass variable is used to determine whether the verification can be passed; the sPrompt variable is the prompt text; and the sValue variable is the value of the text box. As shown below:

4. Do not allow text boxes to be empty. Determine whether sValue is an empty string. If it is, display a prompt after the text box and activate the text box. It is also necessary to prevent subsequent operations and default behaviors. The code is as follows:

5. Determine whether the input value meets the rules, that is, only English letters and no other characters. Declare a regular expression here to determine whether they are all English letters. As shown below:

6. Based on the regular expression result, the submission is passed or blocked.

7. When entering content in the text box, you should delete the following prompt, as shown below:

Modify the js code again:

1. Get the form elements and all text boxes as follows:

2. Encapsulate a validation function and pass in three parameters: elem is the text box element, reg is the regular expression, and text is the prompt keyword. As shown below:

3. Bind the submit event on the form element as follows:

4. Bind the input event to the eFormContainer element to delete the prompt text during input.

Recommend