在看這篇文章之前， 可以看看前兩篇文章，表單驗(yàn)證輸入范圍驗(yàn)證是在原有的基礎(chǔ)上改寫(xiě)的。



(一). 輸入范圍驗(yàn)證存在問(wèn)題

在第二篇上提到的問(wèn)題，在原有的驗(yàn)證中也存在相同的問(wèn)題。當(dāng)然在這次改寫(xiě)中也解決了一些這些問(wèn)題。同時(shí)也添加了對(duì)radio，checkbox，select 元素的驗(yàn)證。當(dāng)然對(duì)于時(shí)間的驗(yàn)證仍沒(méi)有解決，后續(xù)過(guò)程中會(huì)繼續(xù)補(bǔ)充！



(二). 驗(yàn)證參數(shù)的設(shè)計(jì)

onEmptyText: 當(dāng)輸入內(nèi)容為空的時(shí)候顯示文本

onEmptyClass: 當(dāng)輸入內(nèi)容為空的時(shí)候顯示樣式

onSuccessText: 當(dāng)驗(yàn)證成功的時(shí)候顯示的文本

onSuccessClass: 當(dāng)驗(yàn)證成功的時(shí)候顯示的樣式

onErrorText:當(dāng)驗(yàn)證失敗的時(shí)候顯示的文本

onErrorClass:當(dāng)驗(yàn)證失敗的時(shí)候顯示的樣式

onFocusText: 當(dāng)獲得焦點(diǎn)的時(shí)候顯示的文本

onFocusClass:當(dāng)獲得焦點(diǎn)的時(shí)候顯示的樣式

dataType:輸入的數(shù)據(jù)類(lèi)型

min:輸入的最小值

max:輸入的最大值

targetId:顯示提示消息的元素id



改寫(xiě)的部分就是將提示性文字和樣式都單獨(dú)隔離出來(lái)，可以更好靈活的操作表單驗(yàn)證！

改寫(xiě)的文章支持text,number,date 三種 數(shù)據(jù)形式，而且在radio，checkbox，select的驗(yàn)證也有更新。

radio，checkbox ，select 驗(yàn)證只是驗(yàn)證是否選中，而且這里的select 對(duì)于blur 事件并不敏感，所以這里采用的change事件來(lái)驗(yàn)證比較好。



(三). 驗(yàn)證范圍源碼解析

jQuery檢查輸入項(xiàng)的范圍 源碼解析
/**
* onEmptyText: 當(dāng)輸入內(nèi)容為空的時(shí)候顯示文本
* onEmptyClass: 當(dāng)輸入內(nèi)容為空的時(shí)候顯示樣式
* onSuccessText: 當(dāng)驗(yàn)證成功的時(shí)候顯示的文本
* onSuccessClass: 當(dāng)驗(yàn)證成功的時(shí)候顯示的樣式
* onErrorText:當(dāng)驗(yàn)證失敗的時(shí)候顯示的文本
* onErrorClass:當(dāng)驗(yàn)證失敗的時(shí)候顯示的樣式
* onFocusText: 當(dāng)獲得焦點(diǎn)的時(shí)候顯示的文本
* onFocusClass:當(dāng)獲得焦點(diǎn)的時(shí)候顯示的樣式
* dataType:輸入的數(shù)據(jù)類(lèi)型
* min:輸入的最小值
* max:輸入的最大值
* targetId:顯示提示消息的元素id
* @param {Object} inputArg
*/
$.fn.extend({
checkRange:function(inputArg){
//綁定焦點(diǎn)事件
$(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 需要改進(jìn) select沒(méi)有focus事件,應(yīng)該改為change事件

}
if (flag) {
//顯示獲得焦點(diǎn)文本
addText(inputArg.targetId, inputArg.onFocusText);
//切換樣式
addClass(inputArg.targetId, inputArg.onFocusClass);
}
});

//綁定失去焦點(diǎn)事件
$(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 == "") {
//顯示獲得焦點(diǎn)文本
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){
//顯示獲得焦點(diǎn)文本
addText(inputArg.targetId, inputArg.onSuccessText);
//切換樣式
addClass(inputArg.targetId, inputArg.onSuccessClass);
}else{
//顯示獲得焦點(diǎn)文本
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){
//顯示獲得焦點(diǎn)文本
addText(inputArg.targetId, inputArg.onSuccessText);
//切換樣式
addClass(inputArg.targetId, inputArg.onSuccessClass);
}else{
//顯示獲得焦點(diǎn)文本
addText(inputArg.targetId, inputArg.onErrorText);
//切換樣式
addClass(inputArg.targetId, inputArg.onErrorClass);
}
});
}
}
});


這里比較重要的是對(duì)于select元素的驗(yàn)證，select可以選擇多個(gè)選中項(xiàng)。radio，checkbox，select 只是驗(yàn)證選擇長(zhǎng)度，而不會(huì)驗(yàn)證text,date 。這是本文很重要的一部分。源碼中也做了代碼重構(gòu)，有很多共同部分都提取出來(lái)，大大減少了代碼量，同時(shí)也利用了jQuery表單驗(yàn)證擴(kuò)展(二) 中的部分方法。



(四). 提取的共同代碼解析

第二篇中的公用方法
/**
* 根據(jù)輸入框的不同類(lèi)型來(lái)判斷
* @param {Object} flag
* @param {Object} inputArg
*/
function addMessage(flag,inputArg){
if(flag){
//顯示正確信息文本
addText(inputArg.targetId,inputArg.onSuccessText);
//切換樣式
addClass(inputArg.targetId,inputArg.onSuccessClass);
}else{
//顯示錯(cuò)誤信息文本
addText(inputArg.targetId,inputArg.onErrorText);
//切換樣式
addClass(inputArg.targetId,inputArg.onErrorClass);
}
}
/**
* 給目標(biāo)控件添加顯示的文本信息
* @param {Object} targetId 目標(biāo)控件id
* @param {Object} text 需要顯示的文本信息
*/
function addText(targetId,text){
if(text==undefined){
text="";
}
$("#"+targetId).html("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+text);
}
/**
* 切換樣式
* @param {Object} targetId 目標(biāo)控件id
* @param {Object} className 顯示的樣式名稱(chēng)
*/
function addClass(targetId,className){
if(className!=undefined && className!=""){
$("#"+targetId).removeClass();
$("#"+targetId).addClass(className);
}
}


這段代碼主要主要用于添加文本提示和樣式問(wèn)題。

對(duì)于select元素的驗(yàn)證代碼
//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){
//顯示獲得焦點(diǎn)文本
addText(inputArg.targetId, inputArg.onSuccessText);
//切換樣式
addClass(inputArg.targetId, inputArg.onSuccessClass);
}else{
//顯示獲得焦點(diǎn)文本
addText(inputArg.targetId, inputArg.onErrorText);
//切換樣式
addClass(inputArg.targetId, inputArg.onErrorClass);
}
});
}


這段代碼用于驗(yàn)證select選擇框元素，支持多項(xiàng)選擇驗(yàn)證。



(五). 驗(yàn)證使用例子

文本框輸入驗(yàn)證

  當(dāng)輸入的內(nèi)容長(zhǎng)度不符

 輸入的字符串滿(mǎn)足當(dāng)前要求提示

 當(dāng)不輸入文本的時(shí)候驗(yàn)證

對(duì)于數(shù)字的驗(yàn)證

  獲得焦點(diǎn)提示問(wèn)題

 輸入的數(shù)字不滿(mǎn)足范圍

 驗(yàn)證成功

對(duì)于checkbox的驗(yàn)證

 checkbox組其中之一獲得焦點(diǎn)

 選擇滿(mǎn)足數(shù)據(jù)

 選擇超過(guò)數(shù)量

對(duì)于select 多項(xiàng)選擇

 選擇數(shù)量過(guò)多

 驗(yàn)證成功
(六). 驗(yàn)證測(cè)試代碼

以上是測(cè)試的部分代碼 ，不過(guò)基本可以說(shuō)明這個(gè)方法的的使用方式。
這里不多寫(xiě)了，后續(xù)不斷更新......

最新評(píng)論