Native js implements regular validation of the form (submit only after validation)

Native js implements regular validation of the form (submit only after validation)

The following functions are implemented:

1. Username: onfouc displays the msg rule; onkeyup counts characters, where Chinese characters are two characters; onblur verifies whether it passes

2. Mailbox: onblur regular expression matching, the regular expression is written according to your own needs and can be changed according to personal needs

3. Password: Display the strength of the password when onkeyup, verify the password when onblur, whether it is the same characters, whether it is all characters, or all numbers, and whether the length meets the requirements

4. Confirm password: verify whether it is the same as the last time

5. The submit button is only valid after all inputs are verified, otherwise it is invalid

Key points:

1. Chinese is two characters:

function getLength(str) {
    return str.replace(/[^\x00-xff]/g, "xx").length;
    //x00-xff represents all double-byte characters in the ASCII code. This sentence means to replace all non-single-byte characters with xx, that is, two single-byte characters, and then calculate the length}

2. Regular expression for email verification:

var re_e = /^[\w_\.\-]+@[\w]+.([\w]{2,4})$/g

3. Are all characters the same?

function findStr(str, n){
    var temp = 0;
    for(var i = 0;i<str.length;i++){
        if(str.charAt(i)==n){
            temp++:
        };
    }
}

4. Are all numbers or all characters?

 var re_n = /[^\d]/g ;
 if(!re_n.test(str)){//All are numbers}

 var re_n = /[^\a-zA-Z]/g ;
 if(!re_n.test(str)){//All characters}

5. The button is valid only when all form validations are passed and can be submitted:

//My approach is to add a verification identifier to each input, such as email_state; write another verification function, verify the verification identifiers of these four inputs and set the button to be clickable, otherwise it will be disabled; and call this verification function once every onblur.

The complete code is as follows

function register() {
    var oName = document.getElementById("name");
    var count = document.getElementById("count");
    var psw = document.getElementById("psw");
    var psw2 = document.getElementById("psw2");
    var email = document.getElementById("email");
    var name_msg = document.getElementsByClassName("name_msg")[0];
    var psw_msg = document.getElementsByClassName("psw_msg")[0];
    var psw2_msg = document.getElementsByClassName("psw2_msg")[0];
    var email_msg = document.getElementsByClassName("email_msg")[0];
    var psw = document.getElementById("psw");
    var psw2 = document.getElementById("psw2");
    var intensity = getByClass("intensity")[0].getElementsByTagName("span");
    var registerbtn = document.getElementById("submit");
    var oName_state = false;
    var email_state = false;
    var psw_state = false;
    var psw2_state = false;
    var name_length = 0;

    oName.onfocus = function() {
        name_msg.style.display = "inline-block";
    }
    oName.onkeyup = function() {
        count.style.visibility = "visible";
        name_length = getLength(this.value);
        count.innerHTML = name_length + "characters";
        if (name_length == 0) {
            count.style.visibility = "hidden";
        }
    }
    oName.onblur = function() {
        //Contains illegal characters, cannot be empty, length exceeds 25, length is less than 6 characters var re = /[^\w\u4e00-\u9fa5]/g;
        if (re.test(this.value)) {
            name_msg.innerHTML = "<i class='fa fa-close'>Contains illegal characters</i>";
            oName_state = false;
        } else if (this.value == "") {
            name_msg.innerHTML = "<i class='fa fa-close'>cannot be empty</i>";
            oName_state = false;
        } else if (name_length > 25) {
            name_msg.innerHTML = "<i class='fa fa-close'> cannot exceed 25 characters</i>";
            oName_state = false;
        } else if (name_length < 6) {
            name_msg.innerHTML = "<i class='fa fa-close'>cannot be less than 6 characters</i>";
            oName_state = false;
        } else {
            name_msg.innerHTML = "<i class='fa fa-check-square'>OK!</i>";
            oName_state = true;
        }
        checkform();
    }

    psw.onfocus = function() {
        psw_msg.style.display = "inline-block";
        psw_msg.innerHTML = "<i class='fa fa-lightbulb-o'>6-16 characters, letters, numbers or symbols cannot be used alone</i>"
    }
    psw.onkeyup = function() {
        if (this.value.length > 5) {
            intensity[1].className = "active";
            psw2.removeAttribute("disabled");
            psw2_msg.style.display = "inline-block";
        } else {
            intensity[1].className = "";
            psw2.setAttribute("disabled", "");
            psw2_msg.style.display = "none";
        }
        if (this.value.length > 10) {
            intensity[2].className = "active";
            psw2.removeAttribute("disabled");
            psw2_msg.style.display = "inline-block";
        } else {
            intensity[2].className = "";
        }
    }
    psw.onblur = function() {
        //Cannot be empty, cannot be the same, character length 6-16, cannot be all numbers, cannot be all letters var m = findStr(psw.value, psw.value[0]);
        var re_n = /[^\d]/g;
        var re_t = /[^a-zA-Z]/g;
        if (this.value == "") {
            psw_msg.innerHTML = "<i class='fa fa-close'>cannot be empty</i>";
            psw_state = false;
        } else if (m == this.value.length) {
            psw_msg.innerHTML = "<i class='fa fa-close'> cannot be the same characters</i>";
            psw_state = false;
        } else if (this.value.length < 6 || this.value.length > 16) {
            psw_msg.innerHTML = "<i class='fa fa-close'>Length should be 6-16 characters</i>";
            psw_state = false;
        } else if (!re_n.test(this.value)) {
            psw_msg.innerHTML = "<i class='fa fa-close'>Cannot be all numbers</i>";
            psw_state = false;
        } else if (!re_t.test(this.value)) {
            psw_msg.innerHTML = "<i class='fa fa-close'>Cannot be all letters</i>";
            psw_state = false;
        } else {
            psw_msg.innerHTML = "<i class='fa fa-check-square'>OK!</i>";
            psw_state = true;
        }
        checkform();
    }


    psw2.onblur = function() {
        if (psw2.value != psw.value) {
            psw2_msg.innerHTML = "<i class='fa fa-close'>The two inputs are inconsistent</i>";
            psw2_state = false;
        } else {
            psw2_msg.innerHTML = "<i class='fa fa-check-square'>OK!</i>";
            psw2_state = true;
        }
        checkform();
    }

    email.onblur = function() {
        var re_e = /^[\w_\-\.]+@[\w]+\.([\w]{2,4})$/g;
        if (!re_e.test(this.value)) {
            email_msg.innerHTML = "<i class='fa fa-close'>Please enter the correct email format</i>";;
            email_state = false;
        } else {
            email_msg.innerHTML = "<i class='fa fa-check-square'>OK!</i>";
            email_state = true;
        }
        checkform();
    }
    function checkform() {
        if (oName_state && oName_state && psw_state && psw2_state) {
            registerbtn.removeAttribute("disabled");
            // registerbtn.className+=" "+"readySubmit";
            $("#submit").addClass("readySubmit");
        } else {
            registerbtn.setAttribute("disabled", "");
            //registerbtn.className = registerbtn.className.replace( new RegExp( "(\\s|^)" + "readySubmit" + "(\\s|$)" ), " " );  
            // registerbtn.className = registerbtn.className.replace( /(\s|^)readySubmit(\s|$)/g, " " );       
            $("#submit").removeClass("readySubmit");
        }
    }
}

function getLength(str) {
    return str.replace(/[^\x00-xff]/g, "xx").length;
}

function findStr(str, n) {
    var temp = 0;
    for (var i = 0; i < str.length; i++) {
        if (str.charAt(i) == n) {
            temp++;
        }
    }
    return temp;
}

Part of the HTML code

<form id="form">
   <div class="name-field">
        <label>Username</label>
        <input type="text" id="name" autofocus requiered/><span class="msg name_msg"><i class="fa fa-lightbulb-o"> 5-25 characters, 1 Chinese character is two characters, it is recommended to use a Chinese member name</i></span>
        <div id="count">0 characters</div>
   </div>
   <div class="email-field" required>
        <label>Mailbox</label>
       <input type="text" id="email" /><span class="msg email_msg"></span>
       </div>
   <div class="pwd-field" required>
        <label>Password</label>
        <input type="password" id="psw" /><span class="msg psw_msg"></span>
        <div class="intensity">
            <span class="active">Weak</span><span>Medium</span><span>Strong</span>
       </div>
   </div>
   <div class="pwd2-field" required>
        <label>Confirm Password</label>
        <input type="password" id="psw2" disabled="" /><span class="msg psw2_msg">Please enter again</span>
   </div>
   <button type="submit" id="submit" disabled="" class="submitBtn">Register</button>
</form>

CSS Part

.name-field {
    margin-top: 10px
}

.email-field {
    margin-top: 3px
}

.pwd-field {
    margin-top: 10px
}

.pwd2-field {
    margin-top: 10px
}

.register label {
    float: left;
    width: 80px;
    margin-right: 10px;
    text-align: right
}

.register .name_msg,
.register .psw_msg,
.register .psw2_msg,
.register .email_msg {
    margin-left: 10px;
    display: none
}

.intensity,
#count {
    padding-left: 90px;
    margin-top: 3px
}

#count {
    visibility: hidden;
    color: #999;
    font-size: 12px
}

.intensity span {
    display: inline-block;
    background: #FBAA51;
    width: 55px;
    height: 20px;
    text-align: center
}

.intensity .active {
    background: rgba(0, 128, 0, 0.61)
}

.register .submitBtn {
    width: 163px;
    margin: 10px 0 0 90px
}

#submit {
    color: #555
}

Summarize

This is the end of this article about how to implement regular form validation with native js (submitted only after validation). For more information about regular form validation with js, please search previous articles on 123WORDPRESS.COM or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • JavaScript form validation example
  • Native js to implement form validation function
  • 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

<<:  Tutorial on deploying jdk and tomcat on centos7 without interface

>>:  Summary of MySQL stored procedure permission issues

Recommend

A brief discussion on the comparison of varchar, char and text in postgresql database

As shown below: name describe character varying(n...

How to export and import .sql files under Linux command

This article describes how to export and import ....

Web Standard Application: Redesign of Tencent QQ Home Page

Tencent QQ’s homepage has been redesigned, and Web...

Use Meta to cancel the traffic cache to refresh the page every time you visit it for easy debugging

Copy code The code is as follows: <!-- Prevent...

The difference and usage between div and span

Table of contents 1. Differences and characterist...

Example of implementing translation effect (transfrom: translate) with CSS3

We use the translate parameter to achieve movemen...

Detailed explanation of using Docker to build a development environment for Laravel and Vue projects

This article introduces the development environme...

Avoiding Problems Caused by Closures in JavaScript

About let to avoid problems caused by closure Use...

Ideas and practice of multi-language solution for Vue.js front-end project

Table of contents 1. What content usually needs t...

CSS3 animation: the image gradually gets bigger when the mouse is on it and gradually shrinks when the mouse leaves it

Effect check address: Tour plan (uplanok.com) Cod...

MySQL 5.7.18 version free installation configuration tutorial

MySQL is divided into installation version and fr...

MySQL 5.7.21 decompression version installation and configuration method graphic tutorial

Since I often install the system, I have to reins...

Detailed explanation of the this pointing problem in JavaScript

Summarize Global environment ➡️ window Normal fun...

Docker View the Mount Directory Operation of the Container

Only display Docker container mount directory inf...

Detailed explanation of MySQL string concatenation function GROUP_CONCAT

In the previous article, I wrote a cross-table up...