在看这篇文章之前， 可以看看前两篇文章，表单验证输入范围验证是在原有的基础上改写的。

(一). 输入范围验证存在问题

在第二篇上提到的问题，在原有的验证中也存在相同的问题。当然在这次改写中也解决了一些这些问题。同时也添加了对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.length<inputArg.max){

flag=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.min || value.length >= inputArg.max){

flag=false;

}else{

flag=true;

}

break;

case "number":

if (isNaN(value)) {

flag = false;

}

else {

if (value < inputArg.min || 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<inputArg.max){

//显示获得焦点文本

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<inputArg.max){

//显示获得焦点文本

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 多项选择

选择数量过多

验证成功

(六). 验证测试代码

复制代码 代码如下:

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

以上是测试的部分代码 ，不过基本可以说明这个方法的的使用方式。

这里不多写了，后续不断更新......