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 insert pictures into HTML pages and add map index examples

1. Image formats supported on the WEB: GIF: can s...

js realizes a gradually increasing digital animation

Table of contents background Achieve a similar ef...

CSS performance optimization - detailed explanation of will-change usage

will-change tells the browser what changes will h...

How to set up FTP server in CentOS7

FTP is mainly used for file transfer, and is gene...

How to copy MySQL table

Table of contents 1.mysqldump Execution process: ...

Newbies quickly learn the steps to create website icons

<br />Original URL: http://www.lxdong.com/po...

A detailed introduction to the Linux directory structure

When you first start learning Linux, you first ne...

404 error occurs when accessing the homepage of tomcat started in Docker mode

Scenario: When starting tomcat in docker (version...

HTML displays ellipsis beyond the text... implemented through text-overflow

You need to apply CSS to div or span at the same t...

Util module in node.js tutorial example detailed explanation

Table of contents Starting from type judgment Str...

Win10 install Linux ubuntu-18.04 dual system (installation guide)

I installed a Linux Ubuntu system on my computer....