首页>>表单>>一步步注册,填写的资料合格后进入下一步(2013-12-03)

一步步注册,填写的资料合格后进入下一步

一步步注册,填写的资料合格后进入下一步
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

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();  
  5.   
  6. var ck_username = /^[A-Za-z0-9_]{3,20}$/;  
  7. var ck_email = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+.[a-zA-Z.]{2,5}$/;  
  8.   
  9.   
  10. $('#email').change(function()  
  11. {  
  12. var email=$(this).val();  
  13. if (!ck_email.test(email))   
  14. {  
  15.  $(this).next().show().html("Enter valid email");  
  16. }  
  17. else  
  18. {  
  19. $(this).next().hide();  
  20. $("li").next("li.username").slideDown({duration: 'slow',easing: 'easeOutElastic'});  
  21. }  
  22.   
  23. });  
  24.   
  25. $('#username').keyup(function()  
  26. {  
  27. var username=$(this).val();  
  28.   
  29. if (!ck_username.test(username))   
  30. {  
  31.  $(this).next().show().html("Min 3 charts no Space");  
  32. }  
  33. else  
  34. {  
  35. $(this).next().hide();  
  36. $("li").next("li.password").slideDown({duration: 'slow',easing: 'easeOutElastic'});  
  37. }  
  38. });  
  39.   
  40. $('#password').keyup(function()  
  41. {  
  42. var password=$(this).val();  
  43. if (!ck_password.test(password))   
  44. {  
  45.  $(this).next().show().html("Min 6 Charts");  
  46. }  
  47. else  
  48. {  
  49. $(this).next().hide();  
  50. $("li").next("li.submit").slideDown({duration: 'slow',easing: 'easeOutElastic'});  
  51. }  
  52. });  
  53.   
  54.   
  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").show().html("<h1>Thank you!</h1>");  
  63. }  
  64. else  
  65. {  
  66.   
  67. }  
  68. return false;  
  69.   
  70. });  
  71.   
  72.   
  73.   
  74.   
  75.   
  76. })  
  77. </script>  

 


原文地址:http://www.freejs.net/article_biaodan_139.html