Home > Web Front-end > JS Tutorial > js simply implements the verification code of user registration information_javascript skills

js simply implements the verification code of user registration information_javascript skills

WBOY
Release: 2016-05-16 17:14:49
Original
1386 people have browsed it

register.html

Copy code The code is as follows:





用户注册





 
   
       
          
          
       
       
          
          
       
       
          
          
       
       
          
          
       
       
          
          
       
       
          
          
       
       
          
          
       
                                                                     >Please enter your user name
            
         
用户名:
             
          
密码:
            
          
确认密码:
            
          
身份证号:
            
          
电话号码:
            
          
Email:
              
          

            
          
Please enter your password

                                                                                                  td>Please enter your phone number
Please enter your email address



< script type="text/javascript" src="jslib/registerCheck.js">






registerCheck.js

Copy code

The code is as follows:

//When the input box gets focus, display the prompt content
function showDesc(obj)
{
var id= obj.name;
document.getElementById(id).style .display="inline";
}

//Check whether the input content is valid when the input box loses focus
function checkText(obj)
{
//Get the id value of the input box
var id= obj.name;
var text=document.getElementById(id.toString().toUpperCase()).value;

//Determine whether it is empty
if(text.replace(/s/g, "") ==="")
{
document.getElementById(id).innerHTML="Input cannot be empty";
}
else
{
//Assembly method
//Convert the first letter to uppercase, leaving the rest unchanged
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="Input is 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 entered username 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 is inconsistent";
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 length is wrong";
return false ;
}
var expr=/([0]{18}[x|y]?)|([1]{18}[x|y]?)/i;
if(expr .test(IDNumber))
{
document.getElementById(id.name).innerHTML="ID card number cannot be all '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;
//If a non-numeric character is matched, false will be returned
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;
// It starts with a letter or number, followed by @, and the letter or number ends with .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 input email format is false";
return false;
}
return true;
}

CSS

Copy code The code is as follows:

@charset "utf-8";
/* CSS Document */
#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 labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template