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

解决方案 »

  1.   

    <!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>