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