您的位置：首页 > Web前端 > JavaScript

复杂的表单客户端验证

2013-12-12 20:03 513 查看

<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 onsubmit="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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript 表单

相关文章推荐

新的分享

章节导航