Js simple implementation of user registration information verification code

  • 2020-03-29 23:45:49
  • OfStack

register.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> User registration </title>
<style type="text/css">
  @import "css/userRegister.css";
</style> 
</head>
<body id="BODY">
<div id="DIV_FORM">
<form method="post" action="url" >
 <table id="TABLE">
    <tbody>
        <tr>
           <td> User name: </td>
           <td>
              <input name="username"  id="USERNAME" type="text" onfocus="showDesc(this)" onblur="checkText(this)"/>
           </td>
        </tr>
        <tr>
           <td> Password: </td>
           <td>
             <input name="password" id="PASSWORD" type="text" onfocus="showDesc(this)" onblur="checkText(this)"/>
           </td>
        </tr> 
        <tr>
           <td> Confirm password: </td>
           <td>
             <input name="password2" id="PASSWORD2" type="text" onfocus="showDesc(this)" onblur="checkText(this)"/>
           </td>
        </tr> 
        <tr>
           <td> Id no. : </td>
           <td>
             <input name="IDNumber" id="IDNUMBER" type="text" onfocus="showDesc(this)" onblur="checkText(this)"/>
           </td>
        </tr> 
        <tr>
           <td> Telephone no. : </td>
           <td>
             <input name="phoneNumber" id="PHONENUMBER" type="text" onfocus="showDesc(this)" onblur="checkText(this)"/>
           </td>
        </tr> 
        <tr>
           <td>Email : </td>
           <td>
               <input name="email" id="EMAIL" type="text" onfocus="showDesc(this)" onblur="checkText(this)"/>
           </td>
        </tr> 
        <tr>
           <td> </td>
           <td align="right">
             <input type="submit" value=" Confirm to submit " />
           </td>
        </tr> 
    </tbody>  
    </table>
   <table id="TABLE2" border="0">
       <tr><td><span id="username"> Please enter a user name </span></td></tr>
       <tr><td><span id="password"> Please enter your password </span></td></tr>
       <tr><td><span id="password2"> Please enter your password again </span></td></tr>
       <tr><td><span id="IDNumber"> Please enter your id card number </span></td></tr>
       <tr><td><span id="phoneNumber"> Please enter the telephone number </span></td></tr>
       <tr><td><span id="email"> Please enter your email address </span></td></tr>
    </table>
</form>
</div>
<script  type="text/javascript"  src="jslib/registerCheck.js">
</script>
</body>
</html>

registerCheck.js


//When the input box gets focus, the prompt appears
function showDesc(obj)
{  
   var id= obj.name;
   document.getElementById(id).style.display="inline";
}
//Verify that the input field is valid when it loses focus
function checkText(obj)
{
   //Gets the id value of the input box
   var id= obj.name;
   var text=document.getElementById(id.toString().toUpperCase()).value;

   //Determine whether it is null
   if(text.replace(/s/g, "")=="")
   {
      document.getElementById(id).innerHTML=" The input cannot be null ";
   }
   else
   {
     //Assembly method
     //Convert the first letter to uppercase and leave the rest the same
     var firstChar=id.charAt(0).toString().toUpperCase();
     //
     var strsub=id.substring(1,id.length);
     var strMethod="check"+firstChar+strsub+"()";
     var isTrue = eval(strMethod);
     if(isTrue)
     {
         document.getElementById(id).innerHTML=" Enter a valid ";
     }
   }

   
} 
function checkUsername()
{
    //Simply determine the length of the username
    var id = document.getElementById("USERNAME");
    var username=id.value;    
    if(username.length > 10)
    {
      document.getElementById(id.name).innerHTML = " The user name entered is too long ";
      return false;
    } 
    else
    return true;
}
function checkPassword()
{
    var password = document.getElementById("PASSWORD").value;    
    return true;
}
function checkPassword2()
{
     var id=document.getElementById("PASSWORD");
     var id2=document.getElementById("PASSWORD2");
     var password = id.value;    
     var password2 = id2.value;
     if(password!=password2)
     {
        document.getElementById(id.name).innerHTML=" Password inconsistency ";
        return false;
     }
     return true;    
}
function checkIDNumber()
{
  var id=document.getElementById("IDNUMBER"); 
  var IDNumber =id.value;
  if(IDNumber.length<18||IDNumber.length>19)
  {
    document.getElementById(id.name).innerHTML=" The id number is the wrong length ";
    return false;
  }
  var expr=/([0]{18}[x|y]?)|([1]{18}[x|y]?)/i;
  if(expr.test(IDNumber))
  {
     document.getElementById(id.name).innerHTML=" The id number cannot be complete '0' Or all '1'";
     return false;
  }
  return true;
}
function checkPhoneNumber()
{
//Use regular expressions to match input data
   var id=document.getElementById("PHONENUMBER");
   var phone = id.value;     
//Matches to a non-numeric character, returns false
   var expr =  /D/i;
   if(expr.test(phone))
   {
      document.getElementById(id.name).innerHTML=" Cannot enter non-numeric characters ";
      return false;
   }
   return true;

}
function checkEmail()
{
//Use regular expressions to match input data
   var id =  document.getElementById("EMAIL")
   var email = id.value;    
//Start with a letter or number, follow the @, and end with a dot com
   var expr =  /^([0-9]|[a-z])+@([0-9]|[a-z])+(.[c][o][m])$/i;
   if(!expr.test(email))
   {
      document.getElementById(id.name).innerHTML=" The entered mailbox format is incorrect ";
      return false;
   }
   return true;
}

CSS


@charset "utf-8";

#BODY{
    text-align:center;
}
#TABLE{
    text-align:left;
    margin: auto;
    float:left;
}
#DIV_FORM{
    margin-left:300px;
}
#TABLE2{
    text-align:left;
    width:150px;
    height:150px;
}
#TABLE2 tr
{
    height:24px;
}
#TABLE2 span{
    display:none;
}


Related articles: