在看这篇文章之前， 可以看看前两篇文章，表单验证输入范围验证是在原有的基础上改写的。
(一). 输入范围验证存在问题
在第二篇上提到的问题，在原有的验证中也存在相同的问题。当然在这次改写中也解决了一些这些问题。同时也添加了对radio，checkbox，select 元素的验证。当然对于时间的验证仍没有解决，后续过程中会继续补充！
(二). 验证参数的设计
onemptytext: 当输入内容为空的时候显示文本
onemptyclass: 当输入内容为空的时候显示样式
onsuccesstext: 当验证成功的时候显示的文本
onsuccessclass: 当验证成功的时候显示的样式
onerrortext:当验证失败的时候显示的文本
onerrorclass:当验证失败的时候显示的样式
onfocustext: 当获得焦点的时候显示的文本
onfocusclass:当获得焦点的时候显示的样式
datatype:输入的数据类型
min:输入的最小值
max:输入的最大值
targetid:显示提示消息的元素id
改写的部分就是将提示性文字和样式都单独隔离出来，可以更好灵活的操作表单验证！
改写的文章支持text,number,date 三种 数据形式，而且在radio，checkbox，select的验证也有更新。
radio，checkbox ，select 验证只是验证是否选中，而且这里的select 对于blur 事件并不敏感，所以这里采用的change事件来验证比较好。
(三). 验证范围源码解析
jquery检查输入项的范围 源码解析
/**
* onemptytext: 当输入内容为空的时候显示文本
* onemptyclass: 当输入内容为空的时候显示样式
* onsuccesstext: 当验证成功的时候显示的文本
* onsuccessclass: 当验证成功的时候显示的样式
* onerrortext:当验证失败的时候显示的文本
* onerrorclass:当验证失败的时候显示的样式
* onfocustext: 当获得焦点的时候显示的文本
* onfocusclass:当获得焦点的时候显示的样式
* datatype:输入的数据类型
* min:输入的最小值
* max:输入的最大值
* targetid:显示提示消息的元素id
* @param {object} inputarg
*/
$.fn.extend({
checkrange:function(inputarg){
//绑定焦点事件
$(this).bind(focus,function(){
var flag=true;
if($(this).is(input) || $(this).is(textarea)){
if($(this).attr(type)==radio || $(this).attr(type)==checkbox){
var name=$(this).attr(name);
var items=$('input[@name=+name+][checked]');
if(items.length>0){
flag=false;
}
}else{
if($(this).val()!=undefined && $(this).val()!=){
flag=false;
}
}
}else{ //select 需要改进 select没有focus事件,应该改为change事件
}
if (flag) {
//显示获得焦点文本
addtext(inputarg.targetid, inputarg.onfocustext);
//切换样式
addclass(inputarg.targetid, inputarg.onfocusclass);
}
});
//绑定失去焦点事件
$(this).bind(blur,function(){
var flag=false;
if($(this).is(input) || $(this).is(textarea)){
if($(this).attr(type)==radio || $(this).attr(type)==checkbox){
var name=$(this).attr(name);
var items=$('input[@name=+name+][checked]');
if(items!=undefined && items.length>=inputarg.min && items.lengthflag=true;
}
}else{
var value=$(this).val();
if (value == undefined || value == ) {
//显示获得焦点文本
addtext(inputarg.targetid,inputarg.onemptytext);
//切换样式
addclass(inputarg.targetid,inputarg.onemptyclass);
}else {
switch (inputarg.datatype) {
case text:
if(value.length = inputarg.max){
flag=false;
}else{
flag=true;
}
break;
case number:
if (isnan(value)) {
flag = false;
}
else {
if (value = inputarg.max) {
flag = false;
}
else {
flag = true;
}
}
break;
case date:
break;
}
}
}
}else{ //select
}
if(flag){
//显示获得焦点文本
addtext(inputarg.targetid, inputarg.onsuccesstext);
//切换样式
addclass(inputarg.targetid, inputarg.onsuccessclass);
}else{
//显示获得焦点文本
addtext(inputarg.targetid, inputarg.onerrortext);
//切换样式
addclass(inputarg.targetid, inputarg.onerrorclass);
}
});
//select 选择框选择事件
if ($(this).is(select)) {
$(this).bind(change, function(){
var items=$(this).find(option:selected);
if(items!=undefined && items.length>=inputarg.min && items.length//显示获得焦点文本
addtext(inputarg.targetid, inputarg.onsuccesstext);
//切换样式
addclass(inputarg.targetid, inputarg.onsuccessclass);
}else{
//显示获得焦点文本
addtext(inputarg.targetid, inputarg.onerrortext);
//切换样式
addclass(inputarg.targetid, inputarg.onerrorclass);
}
});
}
}
});
这里比较重要的是对于select元素的验证，select可以选择多个选中项。radio，checkbox，select 只是验证选择长度，而不会验证text,date 。这是本文很重要的一部分。源码中也做了代码重构，有很多共同部分都提取出来，大大减少了代码量，同时也利用了jquery表单验证扩展(二) 中的部分方法。
(四). 提取的共同代码解析
第二篇中的公用方法
/**
* 根据输入框的不同类型来判断
* @param {object} flag
* @param {object} inputarg
*/
function addmessage(flag,inputarg){
if(flag){
//显示正确信息文本
addtext(inputarg.targetid,inputarg.onsuccesstext);
//切换样式
addclass(inputarg.targetid,inputarg.onsuccessclass);
}else{
//显示错误信息文本
addtext(inputarg.targetid,inputarg.onerrortext);
//切换样式
addclass(inputarg.targetid,inputarg.onerrorclass);
}
}
/**
* 给目标控件添加显示的文本信息
* @param {object} targetid 目标控件id
* @param {object} text 需要显示的文本信息
*/
function addtext(targetid,text){
if(text==undefined){
text=;
}
$(#+targetid).html(        +text);
}
/**
* 切换样式
* @param {object} targetid 目标控件id
* @param {object} classname 显示的样式名称
*/
function addclass(targetid,classname){
if(classname!=undefined && classname!=){
$(#+targetid).removeclass();
$(#+targetid).addclass(classname);
}
}
这段代码主要主要用于添加文本提示和样式问题。
对于select元素的验证代码
//select 选择框选择事件
if ($(this).is(select)) {
$(this).bind(change, function(){
var items=$(this).find(option:selected);
if(items!=undefined && items.length>=inputarg.min && items.length//显示获得焦点文本
addtext(inputarg.targetid, inputarg.onsuccesstext);
//切换样式
addclass(inputarg.targetid, inputarg.onsuccessclass);
}else{
//显示获得焦点文本
addtext(inputarg.targetid, inputarg.onerrortext);
//切换样式
addclass(inputarg.targetid, inputarg.onerrorclass);
}
});
}
这段代码用于验证select选择框元素，支持多项选择验证。
(五). 验证使用例子
文本框输入验证
  当输入的内容长度不符
 输入的字符串满足当前要求提示
 当不输入文本的时候验证
对于数字的验证
  获得焦点提示问题
 输入的数字不满足范围
 验证成功
对于checkbox的验证
 checkbox组其中之一获得焦点
 选择满足数据
 选择超过数量
对于select 多项选择
 选择数量过多
 验证成功
(六). 验证测试代码
复制代码 代码如下:
untitled document
姓名:
年龄:
描述:
密码1:
密码2:
性别:
男    
女
爱好:
aa    
bb   
aa    
bb
地区:
00000
11111
22222
33333
44444
以上是测试的部分代码 ，不过基本可以说明这个方法的的使用方式。
这里不多写了，后续不断更新......