复杂的表单客户端验证

最新推荐文章于 2022-01-05 17:27:47 发布

wsxlgg

最新推荐文章于 2022-01-05 17:27:47 发布

阅读量722

点赞数

分类专栏： javascript 文章标签： javascript 表单

本文链接：https://blog.csdn.net/shangdi1988/article/details/17288083

版权

javascript 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

<html>
<head><title>复杂的表单客户端的验证</title>
<script type="text/javascript">
     functon validate(){
       var username =document.getElementsByName("username")[0];
       var password =document.getElementsByName("password")[0];
       var gender =document.getElementsByName("gender");
       var interest = document.getElementsByName("interest");
       var coment = document.getElementsByName("comment")[0];

       if(username.value.length < 1){
          alert("用户名不能为空！");
          return false;
       }
       if(password.value.length < 1){
          alert("密码不能为空！");
          return false;
       }
       if(username.value.length < 4 || username.value.length >10){
          alert("用户名长度应该介于4到10之间！");
          return false;
       }
       if(password.value.length < 4 || password.value.length >10){
          alert("密码长度应该介于4到10之间！");
          return false;
       }
       if(!gender[0].checked && !gender[1].checked){
          alert("性别必须要选择");
          return false;
       }
       var n=0;
       for(var i=0;i <interest.length;i++){
          if(interest[i].checked){
            n++;
          }
       }
       if( n < 1){
          alert("兴趣至少要选择一个！")
          return false;
       }
       if( n >3){
          alert("兴趣最多选择三个！")
          return false;
       }
       if(comment.value.length < 1){
          alert("说明必须要填写！");
          return false;
       }
       return true;
     }
</script>

</head>
<body>
<form οnsubmit="return validate();">
用户名：<input type="text" name="username"><br>
密码：<input type="password" name="password"><br>
性别：男<input type="radio" name="gender" value="男">  女<input type="radio" name="gender" value="女"><br>
兴趣：足球<input type="checkbox" name="interest" value="足球">  
篮球<input type="checkbox" name="interest" value="篮球">  
排球<input type="checkbox" name="interest" value="排球">  
羽毛球<input type="checkbox" name="interest" value="羽毛球">  
地址：<select name="address">
      <option value="上海">上海</option>
      <option value="北京">北京</option>
      <option value="天津">天津</option>
</select><br>
说明：<textarea name="comment" rows="15" cols="20"></textarea><br>
<input type="submit" value="点击确认">   <input type="reset" value="重置">
</form>
</body>
</html>