JavaScript code for verifying user registration information

Source: Internet
Author: User

Register.html
Copy codeThe Code is as follows:
<! 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 card number: </td>
<Td>
<Input name = "IDNumber" id = "IDNUMBER" type = "text" onfocus = "showDesc (this)" onblur = "checkText (this)"/>
</Td>
</Tr>
<Tr>
<Td> phone number: </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 submission"/>
</Td>
</Tr>
</Tbody>
</Table>
<Table id = "TABLE2" border = "0">
<Tr> <td> <span id = "username"> enter the user name </span> </td> </tr>
<Tr> <td> <span id = "password"> enter the password </span> </td> </tr>
<Tr> <td> <span id = "password2"> enter the password again </span> </td> </tr>
<Tr> <td> <span id = "IDNumber"> enter your id card number </span> </td> </tr>
<Tr> <td> <span id = "phoneNumber"> enter the phone number </span> </td> </tr>
<Tr> <td> <span id = "email"> enter the email address </span> </td> </tr>
</Table>
</Form>
</Div>
<Script type = "text/javascript" src = "jslib/registerCheck. js">
</Script>
</Body>
</Html>

RegisterCheck. js

Copy codeThe Code is as follows:
// When the input box gets the focus, the prompt content is displayed.
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)
{
// Obtain the id of the input box
Var id = obj. name;
Var text = document. getElementById (id. toString (). toUpperCase (). value;

// Judge whether it is null
If (text. replace (/\ s/g, "") = "")
{
Document. getElementById (id). innerHTML = "input cannot be blank ";
}
Else
{
// Assembly Method
// Converts the first letter to uppercase, And the rest remain 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 = "valid input ";
}
}


}

Function checkUsername ()
{
// Simply judge the length of the user name
Var id = document. getElementById ("USERNAME ");
Var username = id. value;
If (username. length> 10)
{
Document. getElementById (id. name). innerHTML = "the input 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 = "inconsistent passwords ";
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 = "Incorrect id card number 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 card number cannot be '0' or '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 is returned.
Var expr =/\ D/I;
If (expr. test (phone ))
{
Document. getElementById (id. name). innerHTML = "you 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;
// Starts with a letter or number, followed by @, and the letter and number end 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 = "Incorrect email format ";
Return false;
}
Return true;
}

CSS

Copy codeThe 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 Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.