js implements form validation function

js implements form validation function

This article example shares the specific code of js to implement the form verification function for your reference. The specific content is as follows

1. Three events used:

onfocus (focus event), onblur (focus leaving event), onkeyup (key up event)

2. Use events to trigger functions and execute verification information in the functions.

3. Use checkform to determine whether the content in the form is standardized. If it is standardized, the submit button can submit the form information.

Simple effect:

Code in the form:

<form action="demo.html" onsubmit="return checkForm()">
      <div>
      <div class="text">
           <p>Username</p>
           <input id="value" onfocus="shoeTips('hint','Username length cannot be less than six')" onblur="hint_hide()" onkeyup="hint()" type="text" Name="Userame" placeholder="Username" />
           <span id="hint"></span>
          </div>
         <div class="text">
           <p>Password</p>
           <input id="pass_value" onfocus="shoeTips('pass_hint','The password length cannot be less than six')" onblur="pass_hide()" onkeyup="checkPass()" type="password" name="password" placeholder="password" />
            <span id="pass_hint"></span>
            </div>
            <div class="text">
              <p>Confirm Password</p>
              <input id="passpass_value" onfocus="shoeTips('passpass_hint','The two passwords must be consistent')" onblur="passpass_hide()" onkeyup="checkPassPass()" type="password" name="password" placeholder="Confirm password" />
              <span id="passpass_hint"></span>
           </div>
           <div class="text">
                    <p>Email</p>
                    <input id="email" onfocus="shoeTips('email_hint','The email format must be correct')" onblur="emailHide()" onkeyup="emailCheck()" type="email" name="email" placeholder="Email" />
                    <span id="email_hint"></span>
                </div>
                <div class="text">
                    <p>Mobile phone number</p>
                    <input id="phone" type="text" onfocus="shoeTips('phone_hint','A phone number in the format of eleven digits')" onblur="phoneHide()" onkeyup="phoneCheck()" Name="Phone" placeholder="Phone number">
                    <span id="phone_hint"></span>
                </div>
                <div class="submit">
             <input type="submit" value="Submit" />
         </div>
    </div>
</form>

In js:

function shoeTips(spanId, tips) {
 var span = document.getElementById(spanId);
 span.innerHTML = tips;
}
/**
 * Verify username */
function hint() {
 var value = document.getElementById("value").value;
 var hint = document.getElementById("hint");
 if(value.length < 6) {
  hint.innerHTML = "Username is too short";
  return false;
 } else {
  hint.innerHTML = "Qualified Username";
  return true;
 }
}
 
function hint_hide() {
 var hint = document.getElementById("hint");
 hint.innerHTML = "";
}
/**
 * Verify password */
 
function checkPass() {
 var value = document.getElementById("pass_value").value;
 var hint = document.getElementById("pass_hint");
 if(value.length < 6) {
  hint.innerHTML = "The password is too short";
  return false;
 } else {
  hint.innerHTML = "Password format is qualified";
  return true;
 }
}
 
function pass_hide() {
 var hint = document.getElementById("pass_hint");
 hint.innerHTML = "";
}
/***
 * Confirm password verification */
function checkPassPass() {
 var papavalue = document.getElementById("passpass_value").value;
 var value = document.getElementById("pass_value").value;
 var papahint = document.getElementById("passpass_hint");
 if(papavalue != value) {
  papahint.innerHTML = "The two passwords do not match";
  return false;
 } else {
  papahint.innerHTML = "";
  return true;
 }
}
 
function passpass_hide() {
 var papahint = document.getElementById("passpass_hint");
 papahint.innerHTML = "";
}
/**
 * Verify email address */
function checkEmail(strEmail) 
{      
    var emailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
    if ( emailReg.test(strEmail) ) {
        return true;
    }
    else {
// alert("The email address you entered is not in the correct format!");
        return false;
    }
};
function emailCheck() {
 var emailValue = document.getElementById("email").value;
 var email_hint = document.getElementById("email_hint");
 var flag = checkEmail(emailValue);
 if(flag) {
  email_hint.innerHTML = "The email format is correct";
  return true;
 } else {
  email_hint.innerHTML = "Email format error";
  return false;
 }
}
 
function emailHide() {
 var email_hint = document.getElementById("email_hint");
 email_hint.innerHTML = "";
}
/**
 * Verify mobile phone number */
function checkMobile( strMobile )
{ //13588888888
    var regu = /^[1][345678][0-9]{9}$/;
    var re = new RegExp(regu);
    if (re.test(strMobile)) {
        return true;
    }
    else {
        return false;
    }
};
function phoneCheck() {
 var phone = document.getElementById("phone").value;
 var phone_hint = document.getElementById("phone_hint");
 var flag = checkMobile(phone);
 if(flag) {
  phone_hint.innerHTML = "The phone number format is correct";
  return true;
 } else {
  phone_hint.innerHTML = "The phone number format is incorrect";
  return false;
 }
}
 
function phoneHide() {
 var phone_hint = document.getElementById("phone_hint");
 phone_hint.innerHTML = "";
}
 
function checkForm() {
 var flag = emailCheck() && checkPass() && checkPassPass() && hint() && phoneCheck();
 return flag;
}

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • Detailed explanation of the use of JavaScript strategy mode from form validation
  • Using Vee-validate form validation in Vue.js + Nuxt.js project
  • JavaScript example of completing registration page form validation
  • Using JavaScript for form validation
  • How to use Angularjs instructions to do form validation
  • AngularJs form validation function example code
  • AngularJS Getting Started Tutorial: Form Validation Usage Example
  • Vue.js form validation plugin

<<:  Various problems and solutions in the process of deploying Tomcat to release projects on Linux

>>:  MySQL stored procedure method example of returning multiple values

Recommend

How to modify the time in centos virtual machine

The one above shows the system time, and the one ...

VMware installation of Centos8 system tutorial diagram (Chinese graphical mode)

Table of contents 1. Software and system image 2....

Detailed explanation of how to use $props, $attrs and $listeners in Vue

Table of contents background 1. Document Descript...

Docker data volume common operation code examples

If the developer uses Dockerfile to build the ima...

Simply learn various SQL joins

The SQL JOIN clause is used to join rows from two...

Why do code standards require SQL statements not to have too many joins?

Free points Interviewer : Have you ever used Linu...

Summary of MySQL foreign key constraints and table relationships

Table of contents Foreign Key How to determine ta...

CSS3 achieves various border effects

Translucent border Result: Implementation code: &...

Exploring the Linux Kernel: The Secrets of Kconfig

Get a deep understanding of how the Linux configu...

Detailed steps to install the specified version of docker (1.12.6) using rpm

1. Reasons If the system is Centos7.3, the Docker...

Markup language - specify CSS styles for text

Click here to return to the 123WORDPRESS.COM HTML ...

JavaScript to achieve fireworks effects (object-oriented)

This article shares the specific code for JavaScr...

Docker container time zone error issue

Table of contents background question Problem ana...