黑马程序员技术交流社区

标题: 基础测试题中表单校验问题 [打印本页]
作者: Friendy89    时间: 2013-8-15 00:19
标题: 基础测试题中表单校验问题
本帖最后由 Friendy89 于 2013-8-15 23:58 编辑

原题：编写HTML注册表单，需要字段： 用户名、密码、确认密码,、性别（单选）、 兴趣爱好（多选）、 城市（下拉列表）、 个人简介(文本域)
使用JavaScript验证这个表单，要求：
1、 用户名：字母数字或下划线10位以内，只能以字母开头
2、密码：6-16位任意字符
3、确认密码：和密码保持一致.
4、其他项为必填
不知校验代码如何写，求大神指教，最好有代码
作者: Friendy89    时间: 2013-8-15 00:24
这里附上前半部分代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3.         <head>
  4.                 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.                 <title>Insert title here</title>
  6.         </head>
  7.         <body>
  8.            
  9.             <caption >请填写注册信息</caption>
  10.                 <form>
  11.                         <table border="1" bgcolor="#FFFFFF" cellpadding="10" cellspacing="0" width="600">
  12.                                
  13.                                 <tr>
  14.                                         <td>用户名(<font color="#FF0000">必填*</font>)</td>
  15.                                         <td>
  16.                                                 <input type="text" name="user" /> <font size="-2">长度为10位以内只能是字母数字或下划线，并且只能以字母开头</font>
  17.                                         </td>
  18.                                 </tr>
  19.                                 <tr>
  20.                                         <td>输入密码(<font color="#FF0000">必填*</font>)</td>
  21.                                         <td>
  22.                                                 <input type="password" name="password" /> <font size="-2">6-16位任意字符</font>
  23.                                         </td>
  24.                                 </tr>
  25.                                 <tr>
  26.                                         <td>确认密码(<font color="#FF0000">必填*</font>)</td>
  27.                                         <td>
  28.                                                 <input type="password" name="password" />
  29.                                         </td>
  30.                                 </tr>
  31.                                 <tr>
  32.                                         <td>性别(<font color="#FF0000">必填*</font>)</td>
  33.                                         <td>
  34.                                                 <input type="radio" name="sex" value="nan" />男
  35.                                                 <input type="radio" name="sex" value="nv" />女
  36.                                         </td>
  37.                                 </tr>
  38.                                 <tr>
  39.                                         <td>兴趣爱好(<font color="#FF0000">必填，多选</font>)</td>
  40.                                         <td>
  41.                                                 <input type="checkbox" name="play" value="sing" /> 唱歌
  42.                                                 <input type="checkbox" name="player" value="tourism"/> 旅游
  43.                                                 <input type="checkbox" name="shop" value="shopping"/> 购物
  44.                                                 <input type="checkbox" name="player" value="ball"/> 打球
  45.                                                 <input type="checkbox" name="player" value="fitness"/> 健身
  46.                                         </td>
  47.                                 </tr>
  48.                                 <tr>
  49.                                         <td>选择国家(<font color="#FF0000">必选*</font>)</td>
  50.                                         <td>
  51.                                                 <select name="city">
  52.                                                         <option name="nune">--选择城市--</option>
  53.                                                         <option value="BJ">北京</option>
  54.                                                         <option value="SH">上海</option>
  55.                                                         <option value="TJ">天津</option>
  56.                                                         <option value="CQ">重庆</option>
  57.                             <option value="HF">合肥</option>
  58.                             <option value="WH">武汉</option>
  59.                                                 </select>
  60.                                         </td>
  61.                                 </tr>
  62.                                 <tr>
  63.                                         <td>个人简介(<font color="#FF0000">必填*</font>)</td>
  64.                                         <td>
  65.                                                 <textarea name="text" rows="10" cols="55"></textarea>
  66.                                         </td>
  67.                                 </tr>
  68.                                 <tr>
  69.                                         <th colspan="2">
  70.                                                 <input type="reset" value="重置信息"><input type="submit" value="提交表单">
  71.                                         </th>
  72.                                 </tr>
  73.                         </table>
  74.                 </form>
  75.         
  76.         </body>
  77. </html>
复制代码
作者: 神之梦    时间: 2013-8-15 22:22
这个看毕老师最后的几个视频，有讲到
用正则校验
作者: Friendy89    时间: 2013-8-15 23:58
神之梦 发表于 2013-8-15 22:22
这个看毕老师最后的几个视频，有讲到
用正则校验

O(∩_∩)O谢谢，已经看了，题目已经做好
作者: 陈洋    时间: 2013-9-1 20:42
Friendy89 发表于 2013-8-15 23:58
O(∩_∩)O谢谢，已经看了，题目已经做好

你的表单验证的必填选项怎么验证的？
作者: Friendy89    时间: 2013-9-4 00:18
陈洋 发表于 2013-9-1 20:42
你的表单验证的必填选项怎么验证的？

我投机取巧的，设置了一个默认值




欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2