(一). 輸入范圍驗證存在問題
在第二篇上提到的問題，在原有的驗證中也存在相同的問題。當然在這次改寫中也解決了一些這些問題。同時也添加了對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>
以上是測試的部分代碼 ，不過基本可以說明這個方法的的使用方式。
這裡不多寫了，後續不斷更新......