JavaScript-Made Simple registration module form Verification _javascript tips

A registration box for form validation processing

As shown in figure

A simple validation hint function

Code thinking is also relatively simple

The input box is detected and processed when it loses focus

form has onsubmit = "return check ()" behavior, handling validation

When the Submit Form button is clicked, the final verification is made to see if the request is submitted through the form.

First, the most basic html+css part.

 <style type= "Text/css" > body{margin:0;padding:0;}
   . login{position:relative;margin:100px auto;padding:50px 20px;width:350px;height:200px;border:1px solid #333;}
   . login Legend{font-weight:bold;color:green;text-align:center;}
   . login Label{display:inline-block;width:130px;text-align:right;} . Btn{height:30px;width:100px;padding:5px;border:0;background-color: #00dddd; font-weight:bold;cursor:pointer;
   Float:right;}
   input{height:20px;width:170px;}
   . borderred{border:2px solid Red;
 Img{display:none;} </style>  

Then the class-related processing function of JS

  function Hasclass (obj,cls) {  //determine if obj has this class return
    Obj.className.match (New RegExp (' (\\s|^) ' + CLS + ' (\\s|$) '));
  }
  function AddClass (OBJ,CLS) {//To obj Add Class
    if (!this.hasclass (obj,cls)) { 
      obj.classname = "" +CLS;
    }
  }
  function Removeclass (OBJ,CLS) {//Remove obj for class
    if (Hasclass (obj,cls)) { 
      var reg = new RegExp (' (\\s|^) ' + CLS + ' (\\s|$) ');
      Obj.classname = Obj.className.replace (Reg, "");
    }
  

Then verify the values of each input box

 function CheckName (name) {//Verify name (Name!= "") {//NOT NULL is correct, of course can also be AJAX asynchronous fetch server to determine the user name does not repeat the correct removeclass (Ele.name, "Borderred"); Remove class Document.images[0].setattribute ("src", "./img/gou.png"); corresponding icon Document.images[0].style.display = "inline";
    Show return true; }else{//name does not conform to addclass (Ele.name, "borderred");//Add Class Document.images[0].setattribute ("src", "./img/gantan . png "); corresponding icon Document.images[0].style.display = "inline";
    Show return false; } function CHECKPASSW (PASSW1,PASSW2) {//Authentication password if (PASSW1 = "" | | PASSW2 = "" | |
      PASSW1!== passw2) {//two times password input is not empty and does not vary according to 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{//Password input correct     Removeclass (Ele.password, "borderred"); Removeclass (ele.
      R_password, "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 mailbox var pattern =/^ ([\.a-za-z0-9_-]) +@ ([a-za-z0-9_-]) + (\.[ 
    A-za-z0-9_-]) +/;
      if (!pattern.test (email)) {//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{//format 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 event for each input box:

  var ele = {//holds 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 () {//name loses focus detects
      checkname (ele.name.value);
    }
    Ele.password.onblur = function () {//password loses focus detects
      CHECKPASSW (Ele.password.value,ele. R_password.value);
    }
    Ele. R_password.onblur = function () {//r_password loses focus detects
      CHECKPASSW (Ele.password.value,ele. R_password.value);
    }
    Ele.email.onblur = function () {//email loses focus detects
      checkemail (ele.email.value);
    }

Finally, click the check () function that was invoked when the registration was submitted.

function Check () {  //form commit validates start
    var ok = false;
    var nameok = false;
    var Emailok = false;
    var Passwok = false;
    
    if (CheckName (Ele.name.value)) {Nameok = true;}  Validates the 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 succeeded
      //return true; 
    }
    return false;  Error, registration failed
  }

Complete code:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

This is all in this article and hopefully it will help you learn about JavaScript form validation.