表单验证

来源:互联网 发布:ubuntu安装后的20件事 编辑:程序博客网 时间:2024/03/29 03:11

对表单中为文本框类型,下拉列表,单选,复选框的通用验证。

表单验证的样式:

<style type="text/css">
 .input-text{border: solid 1px red;}  -->文本框样式
 .input-select-o{background:red;}   -->下拉列表样式
 .input-select-c{background: #FFF;}-->选中后下拉列表的样式
 .input-o-text{ background-color:#FFF; border:solid #9FF 1px;} -->文本框,单选按钮,复选框选中后的样式
 .input-radion{background-color:red;}  -->单选按钮未选的样式
</style>

 

JS表单验证

 

<script>
 function validate(){
  //获取BODY下所有对象
  var getAll = document.all;
  
  for(var i=0;i<getAll.length;i++){
   /*验证text类型的所有文本框*/
   //如果是text类型的文本框执行本验证
   if(getAll[i].type=="text"){
    //值的长度小于0则没填
    if(getAll[i].value.length<=0){
     //调用没值的样式
     getAll[i].className +=" input-text";
    }else { 
     //调用有值的样式
     getAll[i].className +=" input-o-text";
    }
   }
    
   /*复选框的判断*/
    if(getAll[i].type=="checkbox"){
       if(getAll[i].checked){
     getAll[i].className="input-o-text";
    }else{
     //根据复选框的名称获取所有名称下的复选框
    var _check = document.getElementsByName(getAll[i].name);
    var _ch = false;
    for(var j=0,leng=_check.length;j<leng;j++){
     //如果是复选框对象下的某一个被选
     if(_check[j].checked){
      _check[j].className=" input-o-text";
      _ch=true;
      //alert("未选 ---->  已选"+j);
     }
     //未选---->已选 为true时让所有该复选框名称下的复选框调用已选的样式
     if(_ch){
      getAll[i].className="input-o-text";
      //alert("未选 ---->  已选"+j+"  第二次选择后");
     }else{ //调用没有选中的样式
      getAll[i].className="input-radion";
      //alert("未选"+j+"  ---->");
     }
       }
    }
    }
     /*if(getAll[i].checked){
    //已选的样式
    getAll[i].className=" input-o-text";
   }else {
    var _ch=false;
    //alert(getAll[i].name);
    var che=document.getElementsByName(getAll[i].name);
    for(var j=0,leng=che.length;j<leng;j++){
     if(che[j].checked){
      che[j].className=" input-o-text";
      _ch=true;
      alert("未选 ---->  已选"+j);
     }
     if(_ch){
      che[j].className="input-o-text";
      alert("未选 ---->  已选"+j);
     }else{ //调用没有选中的样式
      che[j].className="input-radion";
      alert("未选"+j);
     }
    }
    //getAll[i].className="input-radion";
   }*/
   
   //单选按钮的验证 
   if(getAll[i].type=="radio"){
    if(getAll[i].checked){
     getAll[i].className +=" input-o-text";
    }else{
     //获得getAll[i].name的对象
     var _radios=document.getElementsByName(getAll[i].name);     
     var _flag=false;     
     for(var j=0,len=_radios.length;j<len;j++){
      //判断某个对象下的某一个单选按钮是否选中
      if(_radios[j].checked){//选中的
       _flag=true;
       _radios[j].className="input-o-text";//对某个对象下的某一个单选按钮调用选中的样式
       break;
      }
     }
     if(_flag)
      getAll[i].className="input-o-text";
     else //调用没有选中的样式
      getAll[i].className="input-radion";
    }
   }
  }
  
  //获取所有下拉列表的对象
  var getSelect = document.getElementsByTagName('select');
  for(var i=0;i<getSelect.length;i++){
   var _val= getSelect[i].value;
   if(!_val||_val.length==0){
    getSelect[i].className+=' input-select-o'
   }else
   {
    getSelect[i].className+=' input-select-c';
   }
  }

</script>

原创粉丝点击