表单客户端验证 出现的问题

<html>
<head>
<script type="text/javascript">
 

  var username = document.getElementsByName("username")[0];

  var password = document.getElementsByName("password");
  var man = document.getElementsByName("man");
  var woman = document.getElementsByName("woman");
  var football = document.getElementsByName("football");
  var basketball = document.getElementsByName("basketball");
  var volyball = document.getElementsByName("volyball");
  var badminton = document.getElementsByName("badminton");
  var instruction = document.getElementsByName("instruction");

  function vaildation(){
          alert(username);

  if( username.value.length == 0){
  alert("username is validate");
  return false;
  }
 
  if(password == ""){
  alert("username is validate");
  return false;
  }
 
  if( username.length() < 4 || username.length() > 10){
  alert("the length of username is validate");
  return false;
  }
 
  if( password.length() < 4 || password.length() > 10){
  alert("the length of password is validate");
  return false;
  }
 
  if ( !man.checked || !woman.checked){
  alert("you must choose one type of sex!");
  return false;}
 
 
  if(( football.selected && basketball.selected && volyball.selected && badminton.selected)||(!football.selected && !basketball.selected && !volyball.selected && !badminton.selected)){
 
  alert("please have a choice a again!");
  return false;
  }
  if(!instruction){
  alert("you should have some description");
  return false;
  }
  return true;
}  
  </script>
</head>

<body>
    <form οnsubmit="return vaildation()">
        用户名:<input type="text" name="username" id="username"><br>
        密码:<input type="password" name="password" id="password"><br>

        性别:男<input type="radio" name="man" id=sex>&nbsp;&nbsp;

                   女<input  type="radio"name="woman" id=sex> <br>

        兴趣:足球<input  type="checkbox"name=football" id="football">&nbsp;&nbsp;&nbsp;

                    篮球 <input type="checkbox" name="basketball" id="basketball">&nbsp;&nbsp;&nbsp;
                    排球<input type="checkbox" name="volyball" id="volyball">&nbsp;&nbsp;&nbsp;
                    羽毛球<input type="checkbox" name="badminton" id="badminton">&nbsp;&nbsp;&nbsp;<br>
        地址:<select>
            <option   value="山东">山东 </option>
            <option value="河南">河南</option>
            <option value="辽宁">辽宁</option>
            <option value="济南">济南</option>

        </select><br>

     说明:<input type="textarea" name="instrution" id="instrustion"><br>

       <input type="submit" value="点击确认" name="confirm" id="confirm">&nbsp;&nbsp;&nbsp;
       <input type="reset" value="重置" name="confirm" id="confirm">
    </form>
</body>

</html>

出现问题:

alert 不起作用!

                图一                                                           图二                                                           图三

绿字部分 是为了调试所加。在给出的代码中出现图一效果。

对红字部分进行几次修改:

1.var username = document.getElementsByName("username")[0].value;   if(username.length == 0) 效果只出现图一不出现图三发生错误。

2.var username = document.getElementsByName("username");  if(username[0].value.length == 0)效果先出现图二,然后出现图三。                                        

3.var username = document.getElementsByName("username")[0].value;  if(username == "") 效果与1一样。

4.ar username = document.getElementsByName("username");   if(username[0].value == "")效果与2一样。

结论:1.getElementsByName(“”) 获得的是元素是集合,不单一。

             2. 作非空判断时可以考虑判断字符串的长度非空或者值非空。

             3.调试时,可以点击页面控制台调试。如IE浏览器,点击工具下面的F12开发人员工具即可出现控制台等。测试上面的4情况,出现效果截图如图四


 图四


  • 对于出现图一,百思不得其解,对照一个源码,发现var username = document.getElementsByName("username")[0];等等  不是定义在function之内,改过来就好了。

经过几天的调试又修改了几个错误:

一、form 表单标签属性用错。

如蓝色字体所示,radio 组内互斥,name必须取相同名字,value属性属性值是给服务器端看的,当用户单击性别按钮,getelsmentByname("name')方法获得男女谁被选中信息,此方法给出指定参数的值。checkbox.也要加value属性。因为name都必须取名相同,这样只能通过getparameterValue("interest")获取集合。select 要有name属性。option 也必须有value值,这个恶值不少用户看到。也是传给服务器端的,这个值取名任意,不必和option选项名一致。加横线的textarea标签用错了,应该用<textarea></textarea>.形式。经修改后的表单如下:

 <form  action = "formservlet"  οnsubmit="return vaildation()">
        用户名:<input type="text" name="username" id="username"><br>
        密码:<input type="password" name="password" id="password"><br>
        性别:男<input type="radio" name="gender" value="男">&nbsp;&nbsp;
                   女<input type="radio" name="gender" value="女"> <br>
        兴趣:足球<input type="checkbox" name="interest" value="football">&nbsp;&nbsp;&nbsp;
                   篮球 <input type="checkbox" name="interest" value="basketball">&nbsp;&nbsp;&nbsp;
                   排球<input type="checkbox" name="interest" value="volyball">&nbsp;&nbsp;&nbsp;
                  羽毛球<input type="checkbox" name="interest" value="badminton">&nbsp;&nbsp;&nbsp;<br>
        地址: <select name="address">
                              <option value="山东">山东</option>
                             <option value="河南">河南</option>
                             <option value="辽宁">辽宁</option>
                             <option value="济南">济南</option>
               </select><br>
         说明:<textarea name="instruction" rows="10" cols="20"></textarea><br>
        <input type="submit" value="点击确认" name="confirm" id="confirm">&nbsp;&nbsp;&nbsp;
        <input type="reset" value="重置" name="confirm" id="confirm">
    </form>

二、javascript段中发现的问题

1.弄不清length和length()的使用场合。length是java 平台给所有数组提供的一个属性,而getElementsByName(“”) 获得的是元素是集合,可以认为是数组,这就不能用length()方法。如代码中加横线的所示。

2.判断按钮和多选框选中问题方法出错。主要原因是从表单中设置value值不对。如代码中加横线和下划线的所示。考虑按钮选中问题,由于radio按钮互斥,只需判断是否有一个选中即可。考虑多选框选中问题,由于是字符串存储信息,可通过判断遍历字符串,用计数器统计字符串的个数来得知选中个数。经修改如下:

  function vaildate(){
  var username = document.getElementsByName("username")[0];
  var password = document.getElementsByName("password")[0];
  var gender = document.getElementsByName("gender");
  var interest = document.getElementsByName("interest");
 
  var instruction = document.getElementsByName("instruction")[0];
          //alert(username);

 if(username.value == ""){
  alert("username is blank");
  return false;
  }
 
  if(password.value == ""){
  alert("password is blank");
  return false;
  }
  if(username.value.length < 4 || username.value.length > 10){
  alert("the length of username is invalid");
  return false;
  }
 
  if(password.value.length < 4 || password.value.length > 10){
  alert("the length of password is invalid");
  return false;
  }
 
 
  if(!gender[0].checked && !gender[1].checked){
  alert("you must choose one type of sex!");
  return false;
  }
 
  var n = 0;
  for(var i= 0; i < interest.length; i++){
      if(interest[i].checked)
      n++;
  }
  if(n<1){
  alert("please have a choice !");
  return false;
  }
 
  if(n >3){
  alert("you hava choose a lot,please have a choice again!");
  return false;
  }
  if(instruction.value.length < 1){
  alert("you should have some description");
  return false;
  }
  return true;
}  
  </script>

3.java web 项目改名之后运行出错

解决方法:选择项目名 右键 然后如下图执行1 2 3

因为项目重命名 但是服务器端部署的名字不会同步更新。需要手动修改。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值