黑马程序员技术交流社区

标题: html/javascript验证表单的两个小问题 [打印本页]
作者: 唐僧踏歌    时间: 2014-4-4 14:32
标题: html/javascript验证表单的两个小问题
本帖最后由 唐僧踏歌 于 2014-4-6 11:30 编辑

1.<tr> <td>性别：    <input type="radio" name="sex" value="male" /> 男
                              <input type="radio" name="sex" value="female" /> 女
</td> </tr>
在JS语句块，要怎样验证注册用户是否已经选中一个了？

2.<tr><td>用户名：  <input name="User" type="text" size="21"></td></tr>  
     像填这个用户名的时候，怎样告诉注册用户，这个框的填写规则？如：3-16位的字母或数字



作者: 残梦共飞雪    时间: 2014-4-4 14:39
本帖最后由 残梦共飞雪 于 2014-4-4 14:40 编辑

第一个：
document.getElementsByName('sex')获取这个名称的所有元素作为数组。
分拆数组判断isChecked。即是否被选中
因为你的元素木有ID，就用ByName了。但是getElementsByName好像在某老版本浏览器不支持。忘了具体哪个了。
ByClass在IE8不支持。

第二个：
首先限定最大长度，元素里设置maxlength = "16"
然后js里获取值，运用正则表达式来判断有数字字母以外的字符。然后再根据.length()判断长度。
作者: 沫然    时间: 2014-4-4 20:04
  1. <html>
  2.         <head>
  3.             <script type="text/javascript">
  4.                 function checkReg()
  5.                 {
  6.                         //验证用户名
  7.                         var user = document.getElementById("userid").value;
  8.                         //正则表达式
  9.                         var userReg = new RegExp(/^[a-zA-Z0-9]{3,16}$/);
  10.                         if(!user.match(userReg))
  11.                         {
  12.                                 document.write("用户名：3-16位的字母或数字"+"<br/>");
  13.                         }

  15.                         //验证性别
  16.                         var sex1 = document.getElementById("sex1");
  17.                         var sex2 = document.getElementById("sex2");
  18.                         //如果没有选择性别就提示
  19.                         if(sex1.checked==false && sex2.checked==false)
  20.                         {
  21.                                 document.write("请选择性别：");
  22.                         }
  23.                 }

  25.         </script>
  26.         </head>

  28.         <body>
  29.                 <form>
  30.                         <table border="1" bordercolor="#000000" width="70%" cellpadding="10" cellspacing="0">
  31.                                     <tr>
  32.                                         <th colspan="2">注册表单</th>
  33.                                         </tr>
  34.         
  35.                                     <tr>
  36.                                         <td>用户名：</td>
  37.                                             <td><input type="text" name="user" id="userid" /></td>
  38.                                 </tr>

  40.                                 <tr>
  41.                                         <td>性别：</td>
  42.                                             <td>
  43.                                                     <input type="radio" name="sex" id="sex1" value="nan" />男
  44.                                                 <input type="radio" name="sex" id="sex2" value="nv" />女
  45.                                             </td>
  46.                                 </tr>

  48.                                 <tr>
  49.                                         <th colspan="2">
  50.                                                     <input type="button" value="验证表单" onClick="checkReg()" />
  51.                                             </th>
  52.                                 </tr>
  53.                 </form>
  54.         </body>
  55. </html>
复制代码


3-16位的字母或数字
正则表达式定义：

var userReg = new RegExp(/^[a-zA-Z0-9]{3,16}$/);


也可以这样写：

var userReg = /^[a-zA-Z0-9]{3,16}$/；
这个比较简单，不用创建对象。

验证是否选中男或是女用checked方法。



作者: 忘川    时间: 2014-4-4 22:33
楼上的回答都很详细啊，话说选择性别的这种单选按钮，建议设置一个默认选中的按钮，比如将男的那个checked属性设置为checked，然后男 女这两个radio的name属性值设成一样，就可以做到2个radio的互斥，这样也省去了还需要验证性别是否已选的过程
作者: 唐僧踏歌    时间: 2014-4-6 11:30
先提问结束吧，都没时间看
作者: 曲佳奇    时间: 2014-4-6 14:05
这些事基础测试里面的题目吧  至于单选按钮  我记得原题的要求是为必填项  我是直接设置了一个默认的
至于验证用户名  可以在JS中 写正则表达式 然后通过exec方法判断返回值 是否为null



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