Register step by step.

Register step by step. Enter the required information for the next demonstration.

 

XML/HTML Code

1. <Div id = "form">
2. <Form method = "post">
3. <Ul>
4. <Li class = "email">
5. <Label> Email: </label> <br/>
6. <Input type = "text" name = "email" id = "email"/>
7. <Span class = "error"> </span>
8. </Li>
9. <Li class = "username">
10. <Label> Username: </label> <br/>
11. <Input type = "text" name = "name" id = "username"/>
12. <Span class = "error"> </span>
13. </Li>
14. <Li class = "password">
15. <Label> Password: </label> <br/>
16. <Input type = "password" name = "password" id = "password"/>
17. <Span class = "error"> </span>
18. </Li>
19. <Li class = "submit">
20. <Input type = "submit" value = "Register" id = 'submit '/>
21. </Li>
22. </Ul>
23. </Form>
24. </Div>

 

JavaScript Code

1. <Script type = "text/javascript">
2. $ (Function ()
3. {
4. $ ("Ul li: first"). show ();
6. Var ck_username =/^ [A-Za-z0-9 _] {} $ /;
7. Var ck_email =/^ [a-zA-Z0-9. _-] + @ [a-zA-Z0-9-] + \. [a-zA-Z.] {} $ /;
10. $ ('# Email'). change (function ()
11. {
12. Var email = $ (this). val ();
13. If (! Ck_email.test (email ))
14. {
15. Certificate (this).next().show().html ("Enter valid email ");
16. }
17. Else
18. {
19. $ (This). next (). hide ();
20. $ ("Li"). next ("li. username"). slideDown ({duration: 'low', easing: 'easeoutelastic '});
21. }
23. });
25. $ ('# Username'). keyup (function ()
26. {
27. Var username = $ (this). val ();
29. If (! Ck_username.test (username ))
30. {
31. Certificate (this).next().show().html ("Min 3 charts no Space ");
32. }
33. Else
34. {
35. $ (This). next (). hide ();
36. $ ("Li"). next ("li. password"). slideDown ({duration: 'low', easing: 'easeoutelastic '});
37. }
38. });
40. $ ('# Password'). keyup (function ()
41. {
42. Var password = $ (this). val ();
43. If (! Ck_password.test (password ))
44. {
45. Certificate (this).next().show().html ("Min 6 Charts ");
46. }
47. Else
48. {
49. $ (This). next (). hide ();
50. $ ("Li"). next ("li. submit"). slideDown ({duration: 'low', easing: 'easeoutelastic '});
51. }
52. });
55. $ ('# Submit'). click (function ()
56. {
57. Var email = $ ("# email"). val ();
58. Var username = $ ("# username"). val ();
59. Var password = $ ("# password"). val ();
60. If (ck_email.test (email) & ck_username.test (username) & ck_password.test (password ))
61. {
62. $ ("# Form" pai.show().html ("
63. }
64. Else
65. {
67. }
68. Return false;
70. });
76. })
77. </Script>

 

Address: http://www.freejs.net/article_biaodan_139.html