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

MySQL Series 7 MySQL Storage Engine

1. MyISAM storage engine shortcoming: No support ...

JavaScript timer to achieve seamless scrolling of pictures

This article shares the specific code of JavaScri...

Five things a good user experience designer should do well (picture and text)

This article is translated from the blog Usability...

Vue3+el-table realizes row and column conversion

Table of contents Row-Column Conversion Analyze t...

mysql database to retrieve the statements of seconds, minutes, hours and days before and after

Get the current time: select current_timestamp; O...

Nginx configuration and compatibility with HTTP implementation code analysis

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

Node.js+express+socket realizes online real-time multi-person chat room

This article shares the specific code of Node.js+...

Teach you how to build a react+antd project from scratch

The previous articles were all my own learning lo...

Summary of methods for finding and deleting duplicate data in MySQL tables

Sometimes we save a lot of duplicate data in the ...

In-depth explanation of hidden fields, a new feature of MySQL 8.0

Preface MySQL version 8.0.23 adds a new feature: ...

Vue detailed introductory notes

Table of contents 1. Introduction 2. Initial Vue ...

Gogs+Jenkins+Docker automated deployment of .NetCore steps

Table of contents Environmental Description Docke...

Example of stars for CSS rating effect

What? What star coat? Well, let’s look at the pic...

Solve the hierarchy problem of child element z-index and parent element sibling nodes in CSS

1. The emergence of the problem Wrote a flat list...

Installation of Docker CE on Ubuntu

This article is used to record the installation o...