javascript 表单验证

主要是复选框的验证:
    1、要求 2题 最少选择为两项  3题 最少选择为三项  最好能封装起来 高手们 帮帮忙！ 大家互相讨论一下 ，
    
<!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=gb2312" />
<script type="text/javascript">
    var kk =0
function chkform(form,pid){
for(var i=0;i<form.elements.length;i++){
var el = form.elements[i];
if(!el.id)
continue;
el.focus();
switch(el.type){
case 'text':
if(!el.value){
 alert(el.title+'不能为空');  
                     return false;  
}
kk = 0;
break;
case 'checkbox':
var msg = el.type == 'checkbox' ? '至少选择一项' : '';
var k = 0;
var ch=document.getElementsByTagName('input');
                    for(var m=0;m<ch.length;m++){
                         if(ch[m].type=='checkbox'){
                                 if(ch[m].checked) kk++
                         } 
                    }
                    if(kk < 1){
                            alert(el.title+' '+msg);  
                               return false;  
                    }
break;
case 'radio':
var msg = el.type == 'radio' ? '需要选择一项' : '';
var k = 0;
for( var j = 0; j < form[el.name].length; j++)  
                    if(form[el.name][j].checked) k++;
if(k == 0){
alert(el.title+' '+msg);  
                    return false;  
}
kk = 0;
break;
case 'textarea':
if(!el.value){
alert(el.title+'不能为空');  
                    return false; 
}
kk=0;
break;
}//switch
}//for
} 
</script>
<title>酒店预订需求调查（内部调查）</title>
</head>
<body>
<div id="layout">
  <div id="top_bg"></div>
<div id="main_content">
<div id="top">
<h1>调查</h1>
</div>
     <div id="shuoming">您好：<br/>　介绍</div>
<form id="form1" name="form1" method="post" action="action.php" onsubmit="return chkform(this , 361);">           
<div class="box">
<h3>1 、1111111111111111111111111？</h3>
<ul><li>
<input type="radio" name="name3_588" class="name3_588" id="name3_588_1" title="11111111111111111" value="是"/><label for="name3_588_1">是</label></li></ul><ul><li><input type="radio" name="name3_588" class="name3_588" id="name3_588_2" title="11111111111111111111111111" value="否"/><label for="name3_588_2">否</label></li></ul>        </div>          
<div class="box">
<h3>2 、2222222222222222222</h3>
<ul><li>
<input type="checkbox" name="name2_580_1" id="name2_580_1" title="22222222222222222"  value="22222222222"/><label for="name2_580_1">222222222222</label></li></ul><ul><li><input type="checkbox" name="name2_580_2" id="name2_580_2" title="酒店内部设施"  value="酒店前台"/><label for="name2_580_2">酒店前台</label></li></ul><ul><li><input type="checkbox" name="name2_580_3" id="name2_580_3" title="酒店内部设施"  value="前厅上网电脑"/><label for="name2_580_3">前厅上网电脑</label></li></ul><ul><li><input type="checkbox" name="name2_580_4" id="name2_580_4" title="酒店内部设施"  value="宾客休息区"/><label for="name2_580_4">宾客休息区</label></li></ul><ul><li><input type="checkbox" name="name2_580_5" id="name2_580_5" title="酒店内部设施"  value="电梯\楼梯"/><label for="name2_580_5">电梯\楼梯</label></li></ul><ul><li><input type="checkbox" name="name2_580_6" id="name2_580_6" title="酒店内部设施"  value="走廊\楼道"/><label for="name2_580_6">走廊\楼道</label></li></ul><ul><li><input type="checkbox" name="name2_580_7" id="name2_580_7" title="酒店内部设施"  value="行李寄存处"/><label for="name2_580_7">行李寄存处</label></li></ul><ul><li><input type="checkbox" name="name2_580_8" id="name2_580_8" title="酒店内部设施"  value="商务中心"/><label for="name2_580_8">商务中心</label></li></ul><ul><li><input type="checkbox" name="name2_580_9" id="name2_580_9" title="酒店内部设施"  value="健身房"/><label for="name2_580_9">健身房</label></li></ul><ul><li><input type="checkbox" name="name2_580_10" id="name2_580_10" title="酒店内部设施"  value="游泳池"/><label for="name2_580_10">游泳池</label></li></ul><ul><li><input type="checkbox" name="name2_580_11" id="name2_580_11" title="酒店内部设施"  value="会议室"/><label for="name2_580_11">会议室</label></li></ul></div>          
          <h3>3 、3333333333333333</h3>
<ul><li><input type="checkbox" name="name2_582_1" id="name2_582_1" title="33333333333333333"  value="附近购物场所"/><label for="name2_582_1">附近购物场所</label></li></ul><ul><li><input type="checkbox" name="name2_582_2" id="name2_582_2" title="酒店附近"  value="附近娱乐场所"/><label for="name2_582_2">附近娱乐场所</label></li></ul><ul><li><input type="checkbox" name="name2_582_3" id="name2_582_3" title="酒店附近"  value="附近餐饮场所"/><label for="name2_582_3">附近餐饮场所</label></li></ul><ul><li><input type="checkbox" name="name2_582_4" id="name2_582_4" title="酒店附近"  value="标志性建筑"/><label for="name2_582_4">标志性建筑</label></li></ul><ul><li><input type="checkbox" name="name2_582_5" id="name2_582_5" title="酒店附近"  value="公交站牌"/><label for="name2_582_5">公交站牌</label></li></ul><ul><li><input type="checkbox" name="name2_582_6" id="name2_582_6" title="酒店附近"  value="附近景点"/><label for="name2_582_6">附近景点</label></li></ul>        </div>          
<div class="box box_li">
          <h3>4 、4444444444444444444444444444444444！</h3>
<ul><li><textarea id="name4_590" name="name4_590" title="444444444444444444444444！" cols="88%" row="5"></textarea></li></ul>        </div>            
        <div class="box box_li">
<h3>5、输入姓名</h3></div>
        <ul>
          <input name="mobile" type="text" id="mobile" maxlength="11" title="手机号" />
        </ul>      
        <div class="bottom">
<input type="submit"  name="submit"  class="btn" id="submit"  value="提交调查" /></div>
</form>  
</div>
</body>
</html>

解决方案 »

  1.   


     case 'checkbox':
                            var msg1 = el.type == 'checkbox' ? '至少选择两项' : '';
                            var msg2 = el.type == 'checkbox' ? '至少选择三项' : '';
                            var ch = document.getElementsByTagName('input');                        for (var m = 0; m < ch.length; m++) {
                                if (ch[m].type == 'checkbox' && m < 11) 
                                {                                if (ch[m].checked)
                                        kk++
                                }
                                else if (ch[m].type == 'checkbox' && m < 18 && m > 10) {
                                    if (ch[m].checked)
                                        k++
                                 }
                            }
                            if (kk < 2) {
                                alert(el.title + ' ' + msg1);
                                return false;
                            }
                            else if (k < 3) {
                                alert(el.title + ' ' + msg2);
                                return false;
                            }
                            
                            break;这个应该可以实现就是焦点和title不对。。
      

  2.   

    case 'checkbox':
                            var msg1 = el.type == 'checkbox' ? '至少选择两项' : '';
                            var msg2 = el.type == 'checkbox' ? '至少选择三项' : '';
                            var ch = document.getElementsByTagName('input');                        for (var m = 0; m < ch.length; m++) {                            if (ch[m].type == 'checkbox' && m > 1 && m <= 12) {
                                    if (ch[m].checked)
                                        kk++
                                }
                                else if (ch[m].type == 'checkbox' && m > 12 && m <= 20) {
                                    if (ch[m].checked)
                                        k++
                                }
                            }                        if (kk < 2) {
                                alert(el.title + ' ' + msg1);
                                return false;
                            }
                            if (k <= 3){
                                alert(el.title + ' ' + msg2);
                                ch[13].focus();
                                return false;
                            }
                            break;