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

Implementation code of using select to select elements in Vue+Openlayer

Effect picture: Implementation code: <template...

Linux common commands chmod to modify file permissions 777 and 754

The following command is often used: chmod 777 文件...

win10 mysql 5.6.35 winx64 free installation version configuration tutorial

mysql 5.6.35 winx64 free installation version con...

A brief discussion on the whole process of Vue's first rendering

Table of contents 1. Vue initialization vue entry...

How to implement scheduled backup of MySQL database

1. Create a shell script vim backupdb.sh Create t...

VMware ESXI server virtualization cluster

Table of contents summary Environment and tool pr...

Solution to invalid margin-top of elements in div tags

Just as the title says. The question is very stran...

CSS3 realizes the graphic falling animation effect

See the effect first Implementation Code <div ...

CSS3 uses scale() and rotate() to achieve zooming and rotation

1. scale() method Zoom refers to "reducing&q...

CSS3 achieves various border effects

Translucent border Result: Implementation code: &...

Sample code for programmatically processing CSS styles

Benefits of a programmatic approach 1. Global con...

Vue Element-ui table realizes tree structure table

This article shares the specific code of Element-...

Nginx configuration and compatibility with HTTP implementation code analysis

Generate SSL Key and CSR file using OpenSSL To co...