<!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" href="https://www.jb51.net/new_file.css"/>
<script language="JavaScript" src="https://www.jb51.net/jquery-1.3.2.min.js" type="text/javascript"></script>
<script language="JavaScript" src="https://www.jb51.net/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" value=""/><span></span>
</p>
<p>
<label>年龄:</label><input type="text" value=""/><span></span>
</p>
<p>
<label>描述:</label><textarea></textarea><span></span>
</p>
<p>
<label>密码1:</label><textarea></textarea><span></span>
</p>
<p>
<label>密码2:</label><textarea></textarea><span></span>
</p>
<p>
<label>性别:</label>
<span>
<input type="radio" value="男" />男
<input type="radio" value="女" />女
</span>
<span></span>
</p>
<p>
<label>爱好:</label>
<span>
<input type="checkbox" value="hobby1" />aa
<input type="checkbox" value="hobby2" />bb
<input type="checkbox" value="hobby3" />aa
<input type="checkbox" value="hobby4" />bb
</span>
<span></span>
</p>
<p>
<label>地区:</label>
<span>
<select 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></span>
</p>
</body>
</html>
以上是测试的部分代码 ，不过基本可以说明这个方法的的使用方式。
这里不多写了，后续不断更新......
您可能感兴趣的文章: