Effect see http://www.cnithr.com/personal/register/user_register_login.php? Reg_from = raffle20080615_69 & TTA = 45 & ttu= 978167
Register and log on like a component
Four statuses:
Initial
Foucus
Lostfoucs detection right/wrong
Login. jsp
<% @ Page Language = "Java" Import = "Java. util. *" contenttype = "text/html; charset = gb2312" %>
<! Doctype HTML public "-// W3C // dtd html 4.0 transitional // en">
<HTML> <Meta http-equiv = Content-Type content = "text/html; charset = gb2312">
<Link href = "img/base.css" type = text/CSS rel = stylesheet>
<Link href = "img/personal.css" type = text/CSS rel = stylesheet>
<Script language = JavaScript src = "img/userreg. js"> </SCRIPT>
</Head>
<Body>
<Div id = plocation style = "width: 550px">
<P> current location: <a Title = home href = "http://www.cnithr.com/"> Home </a> & gt; personal Member registration </P> </div> <! -- Personal registry single region -->
<Form name = userreg action = user_register_login.php method = post>
<Div id = preg>
<DL>
<DT id = top> </DT>
<DD>
<Div>
<P class = th> User name: </P>
<P>
<Input class = intext id = reg_pname onblur = lostfocus (this) onfocus = internal focus (this) name = username>
</P> </div>
<Div>
<P class = right id = hint_reg_pname> a valid user name must consist of a-Z lowercase English letters, 0-9 digits or underscores (_) and must be 4-25 characters in length, do not use spaces. Select a user name that does not cause ambiguity. </P> </div> </DD>
<DD>
<Div>
<P class = th> password: </P>
<P> <input class = intext id = reg_ppass1 onblur = lostfocus (this)
Onfocus = encryption focus (this) type = password name = user_passwd> </P> </div>
<Div> <P class = right id = hint_reg_ppass1> A password can be a combination of letters and Arabic numerals. It must be at least 6 characters in length and must be case sensitive. </P> </div> </DD>
<DD>
<Div>
<P class = th> Confirm Password: </P>
<P> <input class = intext id = reg_ppass2 onblur = lostfocus (this)
Onfocus = internal focus (this) type = password name = PASSWORD> </P> </div>
<Div>
<P class = right id = hint_reg_ppass2> enter the password again </P> </div> </DD>
<DD>
<Div>
<P class = th> Email: </P>
<P> <input class = intext id = reg_pmail onblur = lostfocus (this)
Onfocus = internal focus (this) name = emailaddress> </P> </div>
<Div>
<P class = right id = hint_reg_pmail> <a style = "color: yellow" is recommended"
Href = "http://mail.cn.yahoo.com /? Id = 40160"
Target = _ blank> Yahoo unlimited mailbox </a>. </P> </div> </DD>
<DD>
<Div>
<P class = th> Verification Code: </P>
<P> </P>
<Div style = "margin-Right: 2px">
<Input class = intext id = reg_code name = "verifycode"
Onblur = lostfocus (this) style = "width: 68px" onfocus = internal focus (this)
Name = check_code>
</Div>
<Div>
</Div>
<P> </P> </div>
<Div>
<P class = right id = hint_reg_code> enter the verification code. <Span style = "cursor: Pointer"
Onclick = win_regcode_reload ();> <u class = yellowz> can't see it clearly? Change one </u> </span> </P> </div>
<DT>
<Div id = bottom> </div> </DT> </dl>
<Div style = "width: 100%; padding-top: 10px; Background-color: # FFF; text-align: Center"> <Input
Onclick = "Return check_reg_frm ();" type = image alt = agree to the following terms and conditions, submit registration information
Src = "img/btn_psubmit1.gif">
</Div>
</Form>
<Script language = JavaScript type = text/JavaScript>
Document. getelementbyid ('reg _ pname'). Focus ();
</SCRIPT>
</Body>
Userreg. js
Function compute focus (OBJ ){
Win_into_input ('hint _ '+ obj. ID, 'in'); // enter the prompt information and style control of the information.
}
Function check_reg_frm () {// submit the form
If (! Win_test_reg_pname () {return false ;}
If (! Win_test_reg_ppass1 () {return false ;}
If (! Win_test_reg_ppass2 () {return false ;}
If (! Win_test_reg_pmail () {return false ;}
If (! Win_test_reg_hangye () {return false ;}
If (! Win_test_reg_code () {return false ;}
Return true;
}
Function lostfocus (OBJ ){
Eval ("win_test _" + obj. ID + "()"); // check whether the format is correct after the focus is lost.
}
Function win_test_reg_pname () {// check whether the user name is correct
Search_str = Document. getelementbyid ('reg _ pname'). value;
If (search_str = ''){
// Window. Alert ("Enter the user name! ");
Win_into_input ('hint _ reg_pname ', 'error ');
Return false;
}
VaR Re = new Regexp ("^ ([// W //-//.] {4, 25}) $ ");
If (search_str.search (re) =-1 ){
// Window. Alert ("enter a valid and valid user name! ");
Win_into_input ('hint _ reg_pname ', 'error ');
Return false;
}
Win_into_input ('hint _ reg_pname ', 'testing ');
Return true;
}
Function win_test_reg_ppass1 () {// check whether the password is correct
VaR search_str;
Search_str = Document. getelementbyid ('reg _ ppass1 '). value;
If (search_str = ''){
// Window. Alert ("enter your password! ");
Win_into_input ('hint _ reg_ppass1 ', 'error ')
Return false;
}
VaR Re = new Regexp ("^ ([// W //-] {6,}) $ ");
If (search_str.search (re) =-1 ){
// Window. Alert ("enter a user password with at least 6 valid characters! ");
Win_into_input ('hint _ reg_ppass1 ', 'error ')
Return false;
}
Win_into_input ('hint _ reg_ppass1 ', 'right ');
Return true;
}
Function win_test_reg_ppass2 () {// check whether the password is correct
VaR search_str;
Search_str = Document. getelementbyid ('reg _ ppass2 '). value;
If (search_str = ''){
// Window. Alert ("enter the password for confirmation! ");
Win_into_input ('hint _ reg_ppass2 ', 'error ')
Return false;
}
VaR Re = new Regexp ("^ ([// W //-] {6,}) $ ");
If (search_str.search (re) =-1 ){
// Window. Alert ("enter a password with at least 6 valid characters! ");
Win_into_input ('hint _ reg_ppass2 ', 'error ')
Return false;
}
Search_str_1 = Document. getelementbyid ('reg _ ppass1 '). value;
If (search_str_1! = Search_str ){
// Window. Alert ("confirm that the password is inconsistent. Please enter the password again! ");
Win_into_input ('hint _ reg_ppass2 ', 'error ');
Return false;
}
Win_into_input ('hint _ reg_ppass2 ', 'right ');
Return true;
}
Function win_test_reg_pmail () {// check whether the email address is correct
VaR search_str;
Search_str = Document. getelementbyid ('reg _ pmail'). value;
If (search_str = ''){
// Window. Alert ("Please input an email! ");
Win_cmd_input ('hint _ reg_pmail ', 'error ');
Return false;
}
VaR Re = new Regexp ("^ ([// W //-] + (? : //. [// W //-] +) * @ [A-Za-z0-9] + [// W //-] * (? : //. [// W //-] +) $ ");
If (search_str.search (re) =-1 ){
// Window. Alert ("enter a valid and valid email! ");
Win_cmd_input ('hint _ reg_pmail ', 'error ');
Return false;
}
Win_cmd_input ('hint _ reg_pmail ', 'right ');
Return true;
}
Function win_test_reg_code () {// check whether the verification code is correct
VaR search_str;
Search_str = Document. getelementbyid ('reg _ Code'). value;
If (search_str = ''){
// Window. Alert ("enter the correct verification code! ");
Win_into_input ('hint _ reg_code ', 'error ');
Return false;
}
VaR Re = new Regexp ("^ ([// D] {4}) $"); // how can I change it to a value of four digits or letters?
If (search_str.search (re) =-1 ){
// Window. Alert ("enter the correct verification code! ");
Win_into_input ('hint _ reg_code ', 'error ');
Return false;
}
Win_into_input ('hint _ reg_code ', 'right ');
Return true;
}
Function win_regcode_reload () {// refresh the verification code
// Alert ("test ");
VaR obj_img = Document. getelementbyid ('img _ reg_code ');
// Var d = new date ();
// Var S = D. gethours () + "M" + D. getminutes () + "S" + D. getseconds ();
Obj_img.src = "verifycode. jsp? AA = "+ math. Random () + 100;
}
Function win_into_input (hintid, clsname) {// enter the prompt information and style control of the information.
VaR obj_div = Document. getelementbyid (hintid );
Obj_div.classname = clsname;
VaR strgoodid = hintid. Replace ('hint', 'good ');
If (clsname = "in ")
Obj_div.innerhtml = eval ("arr _" + hintid + "[0]");
If (clsname = "right "){
Obj_div.innerhtml = eval ("arr _" + hintid + "[1]");
If (hintid = "hint_reg_pname "){
Document. getelementbyid ('reg _ pname_userd'). value = 1;
}
Document. getelementbyid (strgoodid). classname = "good ";
} Else {
Document. getelementbyid (strgoodid). classname = "Nogood ";
}
If (clsname = "error ")
Obj_div.innerhtml = eval ("arr _" + hintid + "[2]");
If (clsname = "beused "){
Obj_div.innerhtml = eval ("arr _" + hintid + "[3]");
Document. getelementbyid (hintid). classname = "error ";
}
If (clsname = "testing "){
Obj_div.innerhtml = eval ("arr _" + hintid + "[4]");
}
}
// In right error beused Testing
// [0] prompt; [1] correct; [2] error; [3] already exists; [4] Judging
VaR arr_hint_reg_pname = Array, select a user name that does not cause ambiguity ',
'The user name can be used. ',
'Entered incorrectly! A valid user name should consist of lowercase letters of A-Z, 0-9 digits or underscores, And the length should be between 4-25 characters ',
'User name already exists! Enter a new user name. ',' Verifying that the name already exists ...');
VaR arr_hint_reg_ppass1 = Array ',
'Fill in the correct information. ',
'Entered incorrectly! The password can be a combination of English letters and Arabic numerals. It must not be less than 6 characters long and must be case sensitive ',
'','');
VaR arr_hint_reg_ppass2 = array ('Enter the password again ',
'Filled in correctly ', 'filled in incorrectly! Enter the password again ',
'','');
VaR arr_hint_reg_pmail = array ('enter a valid email address to receive Registration Information and retrieve the lost password. <Br/> it is recommended to use <a href = "http://mail.cn.yahoo.com /? Id = 40160 "target =" _ blank "style =" color: Red "> Yahoo unlimited mailbox </a>. ',
'Fill in the correct information. ',
'Entered incorrectly! Enter a valid email address to receive Registration Information and retrieve the lost password. It is recommended to use <a href = "http://mail.cn.yahoo.com /? Id = 40160 "target =" _ blank "style =" color: Red "> Yahoo unlimited mailbox </a>. ',
'','');
VaR arr_hint_reg_code = array ('enter the verification code. <A class = redz onclick = "win_regcode_reload ();"> <u> can't see it clearly? Change one </u> </a> ',
'The verification code is filled in. <A class = redz onclick = "win_regcode_reload ();"> <u> can't see it clearly? Change one </u> </a> ',
'Entered incorrectly! Enter the verification code. <A class = redz onclick = "win_regcode_reload ();"> <u> can't see it clearly? Change one </u> </a> ',
'','');
Incomplete
Use ajax to check whether the user name exists