Home > Developer > JavaScript
// Html
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 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
// JavaScript Document
// 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
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>.
@ 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;
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
