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

Detailed explanation of the most reasonable way to partition the hard disk when installing Ubuntu Linux system

No matter you are installing Windows or Linux ope...

Detailed explanation of Linux file operation knowledge points

Related system calls for file operations create i...

Example of how to deploy Spring Boot using Docker

Here we mainly use spring-boot out of the box, wh...

Summary of the differences between Vue's watch, computed, and methods

Table of contents 1 Introduction 2 Basic usage 2....

jQuery canvas draws picture verification code example

This article example shares the specific code of ...

Detailed explanation of the case of dynamically generating tables using JavaScript

Table of contents Preface Implementation ideas Im...

Detailed graphic explanation of sqlmap injection

Table of contents 1. We found that this website m...

jQuery implements ad display and hide animation

We often see ads appear after a few seconds and t...

vue-element-admin global loading waiting

Recent requirements: Global loading, all interfac...

Detailed explanation of the functions of each port of Tomcat

From the tomcat configuration file, we can see th...

What does the legendary VUE syntax sugar do?

Table of contents 1. What is syntactic sugar? 2. ...

HTML implements a fixed floating semi-transparent search box on mobile

Question. In the mobile shopping mall system, we ...

A brief discussion on JavaScript throttling and anti-shake

Table of contents Throttling and anti-shake conce...

Specific use of the wx.getUserProfile interface in the applet

Recently, WeChat Mini Program has proposed adjust...

How to enter and exit the Docker container

1 Start the Docker service First you need to know...