js对前台的限制

来源：互联网发布：轩辕世界神兽数据编辑：程序博客网时间：2024/05/02 03:02

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<script   language="javascript" >
  function check(){
  //1.检测用户名
   var username=trim(document.getElementById("us").value);
   if(username.length<6 || username.length>15){
    alert("你输入的用户名有误，用户名必须是有6到15为有效字符组成");
     document.getElementById("us").focus();
     document.getElementById("us").select();
     return false;
   }
   //2.对用户密码进行验证
    var pw1=document.getElementById("pw1").value;
    var pw2=document.getElementById("pw2").value;
    if(pw1.length!=6){
     alert("你输入的密码必须为6位有效字符");
     return false;
     }
     if(pw1!=pw2){
     alert("你输入输入的两次密码必须保持一致");
      return false;
    }
   //3.对单选按钮的限制，要求用户必须选择一个性别
    var sexs=document.getElementsByName("sex");
     var flag=false;
     for(var i=0;i<sexs.length;i++){
      if(sexs[i].checked){
        flag=true;
        break;
        }
     }
     if(!flag){
      alert("请至少选择一个性别");
     }

//4.对复选框的限制
    var ins=document.getElementsByName("in");
     var flag=false;
     for(var i=0;i<sexs.length;i++){
      if(ins[i].checked){
        flag=true;
        break;
        }
     }
     if(!flag){
      alert("请至少选择一个兴趣爱好");

     }

   //5.对用户所在城市进行限制
   var area=document.getElementById("area").value;
  if(area==""){
   alert("请选择所在地区");
   document.getElementById("area").focus();
   return false;
  }
  //document.getElementById("area").options; //option组成的数组

// alert(document.getElementById("desc").value.length);

  //6.对文本域的限制
   var text=document.getElementById("text").value;
    //alert(text);
    if(text.length<4){
     alert("请输入内容")
      return false;
    }

   return false;
   }
  function trim(s){
   s=s.replace(/^\s+/,""); //以非空字符开头
   s=s.replace(/\s+$/,"");//以非空字符结束

return s
}

</script>
</head>
<body>
<form   action="?" method="post"   onsubmit="return check()" >
<table border="1" cellspacing="0" bordercolor="#0000FF" width = "80%" align="center" height="60%">
<tr>
<td>用户名</td>
<td><input type="text" name="username"    id="us"> </td>
<td>文本框</td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password" id="pw1" > </td>
<td>密码文本框</td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="password" name="password" id="pw2" > </td>
<td>密码文本框</td>
</tr>
<tr>
<td>性别</td>
<td><input type="radio" name="sex" >男 <input type="radio" name="sex" >女 </td>
<td>单选按钮</td>
</tr>
<td>爱好</td>
<td><input type="checkbox" name="in" >篮球 <input type="checkbox" name="in" >上网
<input type="checkbox" name="in" >玩 <input type="checkbox" name="in" >交友聊天
<input type="checkbox" name="in" >旅游</td>
<td>复选框</td>
</tr>
<tr>
<td>来自城市</td>
<td>
<select name="area" id="area">
<option value="">请选择城市</option>
<option value="hg">黄冈</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="sz">深圳</option>
<option value="gz">广州</option>
</select></td>
<td>下拉列表</td>
</tr>
<td>上传照片</td>
<td><input type="file" name="upload" > </td>
<td>上传文件框</td>
</tr>
<td>自我介绍</td>
<td>
<textarea cols="34" rows="5"   name="text" id="text"></textarea>
</td>
<td>文本域</td>
</tr>
<tr>
<td>按钮</td>
<td><input type="submit" name="submit" value="提交" >  <input type="submit" name="reset" value="重置" > </td>
<td>按钮框</td>
</tr>
</table>
</form >
</body>
</html>