Form verification of simple registration module made by javascript _ javascript skills

Usually there is a lot of data verification work in our HTML page forms, and it is very tedious and boring to write JavaScript code for a lot of verification forms. Many programmers often miss this job. So I wrote this JavaScript code for your use. It's easy to use. let's take it back and expand it. a registration box is used for form verification.

Simple verification prompt

The code is also relatively simple.

When the input box loses its focus, the system detects and processes it.

The form has the onsubmit = "return check ()" action to process the verification.

When you click the submit form button, the final verification is performed to determine whether the request is submitted through the form.

First, the basic html + css section

Then there is the class-related processing function of js.

Function hasClass (obj, cls) {// judge whether obj has this class return obj. className. match (new RegExp ('(\ s | ^)' + cls + '(\ s | $)');} function addClass (obj, cls) {// add class if (! This. hasClass (obj, cls) {obj. className + = "" + cls;} function removeClass (obj, cls) {// remove the class if (hasClass (obj, cls) corresponding to obj )) {var reg = new RegExp ('(\ s | ^)' + cls + '(\ s | $)'); obj. className = obj. className. replace (reg ,"");}}

Then, verify the value of each input box.

Function checkName (name) {// verify name if (name! = "") {// It is correct if it is not null. of course, you can also obtain the server asynchronously using ajax to determine if the user name is not repeated. the removeClass (ele. name, "borderRed"); // Remove class document. images [0]. setAttribute ("src ",". /img/gou.png "); // corresponds to the document icon. images [0]. style. display = "inline"; // display return true;} else {// name does not match addClass (ele. name, "borderRed"); // add class document. images [0]. setAttribute ("src ",". /img/gantan.png "); // corresponds to the document icon. images [0]. style. display = "inline"; // display return fals E ;}} function checkPassw (passw1, passw2) {// verify the password if (passw1 = "" | passw2 = "" | passw1! = Passw2) {// The two passwords are not empty and do not match addClass (ele. password, "borderRed"); addClass (ele. r_password, "borderRed"); document. images [1]. setAttribute ("src ",". /img/gantan.png "); document. images [1]. style. display = "inline"; document. images [2]. setAttribute ("src ",". /img/gantan.png "); document. images [2]. style. display = "inline"; return false;} else {// correct password input removeClass (ele. password, "borderRed"); removeClass (ele. r_p Assword, "borderRed"); document. images [1]. setAttribute ("src ",". /img/gou.png "); document. images [1]. style. display = "inline"; document. images [2]. setAttribute ("src ",". /img/gou.png "); document. images [2]. style. display = "inline"; return true ;}} function checkEmail (email) {// verify email var pattern =/^ ([\. a-zA-Z0-9 _-]) + @ ([a-zA-Z0-9 _-]) + (\. [a-zA-Z0-9 _-]) +/; if (! Pattern. test (email) {// The email format is incorrect. addClass (ele. email, "borderRed"); document. images [3]. setAttribute ("src ",". /img/gantan.png "); document. images [3]. style. display = "inline"; ele. email. select (); return false;} else {// The format is correct removeClass (ele. email, "borderRed"); document. images [3]. setAttribute ("src ",". /img/gou.png "); document. images [3]. style. display = "inline"; return true ;}}

Then, add a listener for each input box:

Var ele = {// store each input field obj name: document. getElementById ("name"), password: document. getElementById ("password"), R_password: document. getElementById ("R_password"), email: document. getElementById ("email")}; ele. name. onblur = function () {// The checkName (ele. name. value);} ele. password. onblur = function () {// if the password loses focus, checkPassw (ele. password. value, ele. r_password.value);} ele. r_password.onblur = function () {// If R_password loses focus, checkPassw (ele. password. value, ele. r_password.value);} ele. email. onblur = function () {// Check checkEmail (ele. email. value );}

Finally, click the check () function called when submitting registration.

Function check () {// when the form is submitted, the Verification starts. var OK = false; var nameOk = false; var emailOk = false; var passwOk = false; if (checkName (ele. name. value) {nameOk = true;} // verify name if (checkPassw (ele. password. value, ele. r_password.value) {passwOk = true;} // Verify password if (checkEmail (ele. email. value) {emailOk = true;} // verify email if (nameOk & passwOk & emailOk) {alert ("Tip: Register Success .. "); // registration successful // return true;} return false; // incorrect, registration failed}

Complete code:

 
 Register