表单验证,该怎么处理

2012-02-19

表单验证HTML code!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/

表单验证

HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script language="javascript" src="js/jquery-1.js"></script></head><body><div id="gab"><ul class="f"><li><span  class="mLeft">名称:</span><input  type="text"  /><span  class="mLeft">电话:</span> <input  type="text"   /></li>  <li><span  class="mLeft">名称:</span><input  type="text"  /><span  class="mLeft">电话:</span> <input  type="text"  /></li> <li><span  class="mLeft">名称:</span><input  type="text"   /><span  class="mLeft">电话:</span> <input  type="text"  /></li>   <li><span  class="mLeft">名称:</span><input  type="text"  /><span  class="mLeft">电话:</span><input  type="text"  /></li> <li><span  class="mLeft">名称:</span><input  type="text"  /><span  class="mLeft">电话:</span><input  type="text" /></li></ul> <p><button id="btn">点击</button></p></div></body><script language="javascript">$(function(){           /*****/         // checkInput("gab")         //alert(checkInput("gab"))           /****/           })//function checkInput(id){//    for(var i=0;i<$("#"+id+" .f > li").length ;i++){//       for(var j=0;j<2;j++){//          var $input=$("#"+id+" .f > li").eq(i).find("input").eq(j);//           if($input.val()!="" && $input.siblings("input").val()=="")//            alert(0)//          }//    }//}</script></html>

每组li里面的input要么都填要么就不填，如果只填了一个，则在点击button的时候弹出"不能为空".注意是每组li里面的两个input

[解决办法]
改了一下，不晓得是不是你想要的。

HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script language="javascript" src="js/jquery-1.js"></script></head><body><div id="gab"><ul class="f"><li><span  class="mLeft">名称:</span><input  type="text"  name="name"/><span  class="mLeft">电话:</span> <input  type="text"   name="tel"/></li>  <li><span  class="mLeft">名称:</span><input  type="text"  name="name"/><span  class="mLeft">电话:</span> <input  type="text"  name="tel"/></li> <li><span  class="mLeft">名称:</span><input  type="text"   name="name"/><span  class="mLeft">电话:</span> <input  type="text"  name="tel"/></li>   <li><span  class="mLeft">名称:</span><input  type="text" name="name" /><span  class="mLeft">电话:</span><input  type="text"  name="tel"/></li> <li><span  class="mLeft">名称:</span><input  type="text" name="name" /><span  class="mLeft">电话:</span><input  type="text" name="tel"/></li></ul> <p><button id="btn" onclick="checkInfo()">点击</button></p></div></body><script language="javascript">function checkInfo() {    var nameObjs=document.getElementsByName("name");    var telObjs=document.getElementsByName("tel");    for(var i=0,length = nameObjs.length;i<length;i++) {        if((nameObjs[i].value != "" && telObjs[i].value == "")) {            alert("不能为空。");            return false;        }    }    alert("校验通过。。。");    return true;}</script></html> 
 
[解决办法]
JScript codefunction checkInput(obj){    this.obj = obj;}checkInput.prototype = {    init:function(){        var oInputs = this.obj.getElementsByTagName('input');        var ob = [];        if(oInputs[0].value == '' && oInputs[1].value == '' || oInputs[0].value != '' && oInputs[1].value != ''){            ob.push(1);        }else{            ob.push(0);        }        return ob;    }}window.onload = function(){    var lis = document.getElementById('gab').getElementsByTagName('li');    var btn = document.getElementById('btn');    btn.onclick = function(){        var oTest = [];        for(var i=0,len=lis.length; i<len; i++){            var test = new checkInput(lis[i]);            oTest.push(test.init());        }        for (var i=0,len = oTest.length; i<len; i++){            if(oTest[i] == 0){                alert("不能为空");                oTest.length = 0;                return;            }        }    }}
[解决办法]
function checkInput(obj){
   this.obj = obj;
}
checkInput.prototype = {
   init:function(){
       var oInputs = this.obj.getElementsByTagName('input');
       var ob = [];
       if(oInputs[0].value == '' && oInputs[1].value == '' || oInputs[0].value != '' && oInputs[1].value != ''){
           ob.push(1);
       }else{
           ob.push(0);
       }
       return ob;
   }
}

window.onload = function(){
   var lis = document.getElementById('gab').getElementsByTagName('li');
   var btn = document.getElementById('btn');
   btn.onclick = function(){
       var oTest = [];
       for(var i=0,len=lis.length; i<len; i++){
           var test = new checkInput(lis[i]);
           oTest.push(test.init());
       }
       for (var i=0,len = oTest.length; i<len; i++){
           if(oTest[i] == 0){
               alert("不能为空");
               oTest.length = 0;
               return;
           }
       }
   }
}
[解决办法]
JScript codeif((nameObjs[i].value != "" && telObjs[i].value == "")) {            alert("不能为空。");            return false;}

热点排行

JavaScript

表单验证,该怎么处理