日期:2014-05-16  浏览次数:20375 次

紧急!有10条规则,可以任意制定,比如如果第2条到第5条有1条不符合
紧急!有10条规则,可以任意制定,比如如果第2条到第5条有1条不符合,第6条到第10条有2条不通过,那么这个规则就是未通过,请问高人该怎么设计,而且是checkbox来判定的,可以写个例子给我吗,这参数怎么提供给客户最好

------解决方案--------------------
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 type="text/javascript">
var rule = {
    'Opt_required': [1,2,3,4,5], //指定必选项
    'rules': ['5-9_1']    //规则:从第6项到第10项的选项最多允许有一项不选
}

window.onload = function() {
    var f = document.getElementsByTagName('form')[0];
    f.style.backgroundColor = '#FF80FF';
    var obj = document.getElementById('options').getElementsByTagName('input');
    
    for (var i = 0; i < obj.length; i ++) {
        obj[i].onclick = function() {
            var FLAG = true;
            //验证必选项
            for (var j = 0; j < rule.Opt_required.length - 1; j ++) {
                if (!obj[rule.Opt_required[j]].checked) {
                    FLAG = false;
                    break;
                }
            }
            
            //验证可选项
            var optionalNumber = rule.rules[0].split('_')[1];
            var counter = 0;
            var tmp = rule.rules[0].split('_')[0];
            for (var k = tmp.split('-')[0]; k <= tmp.split('-')[1]; k ++) {
                if (!obj[k].checked) counter ++;
            }
            if (counter > optionalNumber) FLAG = false;
            
            if (FLAG) f.style.backgroundColor = '#80FF80';
            else f.style.backgroundColor = '#FF80FF';
        }
    }
}
</script>

</head>

<body>

<p>表单背景色指示验证状态,红色为不通过,绿色为通过</p>
<form>
    <div id="options">
      <input type="checkbox" />Rule_01<br />
      <input type="checkbox" />Rule_02<br />
      <input type="checkbox" />Rule_03<br />
      <input type="checkbox" />Rule_04<br />
      <input type="checkbox" />Rule_05<br />
      <input type="checkbox" />Rule_06<br />
      <input type="checkbox" />Rule_07<br />
      <input type="checkbox" />Rule_08<br />
      <input type="checkbox" />Rule_09<br />
      <input type="checkbox" />Rule_10<br />
    </div>
</form>

</body>
</html>