A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 欧玉斌 中级黑马   /  2012-10-27 21:12  /  2125 人查看  /  6 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

这是基础测试的一道题,我想大家都遇到了吧。
编写HTML注册表单,,需要字段:
        用户名,
        密码,
        确认密码,
        邮件,
        确认邮件,
        性别(单选),
        城市(下拉列表),
        兴趣爱好(多选),
        提交及重置按钮。
使用JavaScript验证HTML表单。要求如下:
        1,“登录名”必须是字母数字或下划线, 不能以数字开头;
        2,密码为6-16位字母、数字或者下划线.;
        3,密码和确认密码一致;
        4,邮件地址是正确的邮件地址格式;
        5,邮件地址和确认邮件地址一致;
由于对javascript接触少,只写出了以下代码。
一直听说jquery非常便捷,“
写的更少,但做的更多”,但一直没有系统学过,只是在做网页导航条、图片切换、日期选择的时候,用一些别人做好的插件
有没有大牛把上面的表单验证用jquery实现一下,给我们想学jquery的小虾一些参考。
上网也查到了一些jquery验证表单的资料,但看不懂,能不能推荐一些好的学习资料,如博文。拜谢{:soso_e196:}
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head runat="server">
  3. <title>表单验证</title>
  4. <script type="text/javascript">
  5. function checkInfo() {
  6. /*验证登录名格式:登录名必须是字母数字或下划线, 不能以数字开头*/
  7. var regexName = /^[^0-9][a-zA-Z0-9_]{1,}$/;
  8. var userName = document.getElementById("userName");
  9. if (!userName.value.match(regexName)) {
  10. alert("用户名错误");
  11. userName.value = "";
  12. userName.focus();
  13. window.event.returnValue = false;
  14. return;
  15. }
  16. /*验证密码格式:密码为6-16位字母、数字或者下划线*/
  17. var regexPwd = /^[a-zA-Z0-9_]{6,16}$/;
  18. var pwd = document.getElementById("pwd");
  19. var pwdCheck = document.getElementById("pwdCheck");
  20. if (!pwd.value.match(regexPwd)) {
  21. alert("密码格式错误");
  22. pwd.value = "";
  23. pwd.focus();
  24. window.event.returnValue = false;
  25. return;
  26. }
  27. /*验证密码和确认密码一致*/
  28. if (pwdCheck.value != pwd.value){
  29. alert("密码输入不一致");
  30. pwdCheck.value = "";
  31. pwdCheck.focus();
  32. window.event.returnValue = false;
  33. return;
  34. }
  35. /*验证邮箱格式*/
  36. var regexEmail = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
  37. var email = document.getElementById("email");
  38. var emailCheck = document.getElementById("emailCheck");
  39. if (!email.value.match(regexEmail))
  40. {
  41. alert("邮箱格式错误");
  42. email.value = "";
  43. email.focus();
  44. window.event.returnValue = false;
  45. return;
  46. }
  47. /*验证邮箱输入是否一致*/
  48. if (emailCheck.value != email.value){
  49. alert("邮箱输入不一致");
  50. emailCheck.value = "";
  51. emailCheck.focus();
  52. window.event.returnValue = false;
  53. return;
  54. }
  55. if(window.event.returnValue=true)
  56. alert("提交成功");

  57. }

  58. </script>
  59. </head>
  60. <body>
  61. <form id="form1" runat="server">
  62. <div>
  63. <table width="800" border="0">
  64. <tr>
  65. <td width="130">用户名:</td>
  66. <td ><input id="userName" type="text" />(用户名必须是字母数字或下划线,不能以数字开头)</td>
  67. </tr>
  68. <tr>
  69. <td>密码:</td>
  70. <td><input id="pwd" type="password"/>(密码必须是6-16位字母、数字或下划线)</</td>
  71. </tr>
  72. <tr>
  73. <td>确认密码:</td>
  74. <td><input id="pwdCheck" type="password" /></td>
  75. </tr>
  76. <tr>
  77. <td>邮件:</td>
  78. <td><input id="email" type="text" /></td>
  79. </tr>
  80. <tr>
  81. <td>确认邮件:</td>
  82. <td><input id="emailCheck" type="text" /></td>
  83. </tr>
  84. <tr>
  85. <td>性别:</td>
  86. <td><input name="sex" type="radio" value="" />男
  87. <input name="sex" type="radio" value="" />女</td>
  88. </tr>
  89. <tr>
  90. <td>城市</td>
  91. <td>
  92. <select name="">
  93. <option value ="nanning">南宁</option>
  94. <option value ="guiling">桂林</option>
  95. <option value="liuzhou">柳州</option>
  96. <option value="yuling">玉林</option>
  97. </select></td>
  98. </tr>
  99. <tr>
  100. <td>兴趣爱好:</td>
  101. <td>
  102. <input type="checkbox" name="movie"/>看电影
  103. <input type="checkbox" name="game"/>玩游戏
  104. <input type="checkbox" name="game"/>看书
  105. </td>
  106. </tr>
  107. <tr>
  108. <td> </td>
  109. <td><input type="submit" name="Submit" value="提交" onclick="checkInfo()" />
  110. <input type="reset" name="reset" value="重置" /></td>
  111. </tr>
  112. <tr>
  113. <td> </td>
  114. <td> </td>
  115. </tr>
  116. </table>
  117. </div>
  118. </form>
  119. </body>
  120. </html>
复制代码

评分

参与人数 1技术分 +2 收起 理由
张文 + 2

查看全部评分

6 个回复

倒序浏览
不错,学习了。谢谢。
回复 使用道具 举报
我也来学习。
回复 使用道具 举报
张文 发表于 2012-10-27 22:30
不错,学习了。谢谢。

学习了,就加加分呗{:soso_e154:}
回复 使用道具 举报
我还准备进来看能帮到啥忙的呢。
回复 使用道具 举报
dqzg12300 发表于 2012-10-28 19:15
我还准备进来看能帮到啥忙的呢。

没事没事,有空你也去发发帖啊,帮五期搞点人气
回复 使用道具 举报
我也在努力啦。!
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马