当前位置： 代码迷 >> Web前端 >> 一步步登记,填写的资料合格后进入下一步
  详细解决方案

一步步登记,填写的资料合格后进入下一步

热度：530   发布时间：2014-02-12 21:25:08.0
一步步注册,填写的资料合格后进入下一步

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

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

?

?

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

1 楼 理论上不存在 2014-02-07  
效果不错，但是并不实用。
如果有人注册到中间要输入他不想输入的，比如身份证之类，会让他愤怒，毕竟之前输入那么多
  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.