1.jquery
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link type="text/css" rel="stylesheet" href="new_file.css"/>
<script language="JavaScript" src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script language="JavaScript" src="jquery-extend-1.0.0.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
$("#txtName").checkRange({
onFocusText:"必填项",
onFocusClass:"notice",
targetId:"txtNameTip",
onSuccessText:"验证成功",
onSuccessClass:"correct",
onErrorText:"你真不听话，请认真填写",
onErrorClass:"error",
min:6,
max:12,
dataType:"text"
});
$("#rdbMan,#rdbWoman").checkRange({
onFocusText:"必填项",
onFocusClass:"notice",
targetId:"txtSexTip"
});
$("#txtPass2").checkRange({
onFocusText:"必填项",
onFocusClass:"notice",
targetId:"txtPass2Tip",
onSuccessText:"验证成功",
onSuccessClass:"correct",
onErrorText:"你真不听话，请认真填写",
onErrorClass:"error",
min:10,
max:60,
dataType:"text"
});
$("#rdbMan1,#rdbWoman2,,#rdbMan3,,#rdbWoman4").checkRange({
onFocusText:"必填项",
onFocusClass:"notice",
targetId:"txthobbyTip",
onSuccessText:"验证成功",
onSuccessClass:"correct",
onErrorText:"你真不听话，请认真填写",
onErrorClass:"error",
min:1,
max:3,
dataType:"text"
});
$("#txtAge").checkRange({
onFocusText:"必填项",
onFocusClass:"notice",
targetId:"txtAgeTip",
onSuccessText:"验证成功",
onSuccessClass:"correct",
onErrorText:"输入的范围为10-60",
onErrorClass:"error",
min:10,
max:60,
dataType:"number"
});
$("#ddlOption").checkRange({
onFocusText:"必填项",
onFocusClass:"notice",
targetId:"ddlOptionTip",
onSuccessText:"验证成功",
onSuccessClass:"correct",
onErrorText:"你真不听话，请认真填写",
onErrorClass:"error",
min:1,
max:2,
dataType:"number"
});
$("#rdbMan,#rdbWoman").checkRange({
onFocusText:"必填项",
onFocusClass:"notice",
targetId:"txtSexTip",
onSuccessText:"验证成功",
onSuccessClass:"correct",
onErrorText:"你真不听话，请认真填写",
onErrorClass:"error",
min:1,
max:2,
dataType:"number"
});
});
</script>
</head>
<body>
<p>
<label>姓名:</label><input type="text" id="txtName" value=""/><span id="txtNameTip"></span>
</p>
<p>
<label>年龄:</label><input type="text" id="txtAge" value=""/><span id="txtAgeTip"></span>
</p>
<p>
<label>描述:</label><textarea id="txtArea"></textarea><span id="txtAreaTip"></span>
</p>
<p>
<label>密码1:</label><textarea id="txtPass1"></textarea><span id="txtPass1Tip"></span>
</p>
<p>
<label>密码2:</label><textarea id="txtPass2"></textarea><span id="txtPass2Tip"></span>
</p>
<p>
<label>性别:</label>
<span>
<input id="rdbMan" type="radio" name="sex" value="男" />男
<input id="rdbWoman" type="radio" name="sex" value="女" />女
</span>
<span id="txtSexTip"></span>
</p>
<p>
<label>爱好:</label>
<span>
<input id="rdbMan1" type="checkbox" name="hobby" value="hobby1" />aa
<input id="rdbWoman2" type="checkbox" name="hobby" value="hobby2" />bb
<input id="rdbMan3" type="checkbox" name="hobby" value="hobby3" />aa
<input id="rdbWoman4" type="checkbox" name="hobby" value="hobby4" />bb
</span>
<span id="txthobbyTip"></span>
</p>
<p>
<label>地区:</label>
<span>
<select id="ddlOption" name="area" multiple="multiple">
<option value="0">00000</option>
<option value="1">11111</option>
<option value="2">22222</option>
<option value="3">33333</option>
<option value="4">44444</option>
</select>
</span>
<span id="ddlOptionTip"></span>
</p>
</body>
</html>