網頁制作poluoluo文章簡介：此前，我曾經寫過一個基於JQuery的表單校驗 validator.js ,用了一段時間發現出現了一些問題。與大家互相探討一下。
此前，我曾經寫過一個基於JQuery的表單校驗 validator.js ,用了一段時間發現出現了一些問題。與大家互相探討一下。
validator.jsp version: alpha 1.0
舉其中一個驗證函數為例:
......
function CheckNull(obj, objname){
$(obj).ready( function(){
if (!$(obj).next().is("span")) $(obj).after(" 必填"); } );
$(obj).focus( function(){
$(this).next("span").html(objname+"必填");
$(this).next("span").removeClass();
$(this).next("span").addClass("onFocus");
});
$(obj).blur(function(){
if($.trim($(this).val()) != ""){
$(this).next("span").html("已填");
$(this).next("span").removeClass();
$(this).next("span").addClass("onSuccess");
}else{
$(this).next("span").html(objname+"必填");
$(this).next("span").removeClass();
$(this).next("span").addClass("onError");
}
});
}
......
設計這個驗證插件的思路是讓團隊中不太懂JAVASCRIPT的美工人員也可以編寫簡單的表單驗證程序。
主要原理是，對參數中 obj 的三種狀態進行處理。
- $(obj).ready 當obj加載結束時，自動插入<span>作為提示容器。
- $(obj).focus 當obj獲得焦點時，提示該字段的輸入規則。
- $(obj).blur 當obj失去焦點時，校驗字段的合法性。
前端頁面調用<script>
$(document).ready(function(){ //頁面加載後
CheckNull(account,"用戶名"); //校驗用戶名不為空
});
$("submit").click(function(){
chkfrm(document.form1); //id="submit"按鈕添加click事件
});
function chkfrm(obj){ //檢查表單各項
$("input:text,input:password,select,",obj).each(function(){
$(this).blur();
});
if ($(".onError:first")==null)
obj.submit(); //沒有錯誤就提交表單
else
$(".onError:first").prev().focus(); //第一個出錯項獲得焦點
}
</script>
這個插件雖然在一段時間裡滿足了實際需要，但是在持續的使用中，我發現存在以下幾個問題：
- 布局不靈活，在 input 後添加提示語句，如果input都是單行的，那沒有問題，但如果是一行當中有多個input 這個插件的提示效果就很糟糕了。
- 校驗觸發方式存在缺陷，$(this).blur();觸發校驗並不保險，例如表單有默認值無需填寫，用戶不觸發blur事件前，得不到正確提示。
- 可靠性不強，通過 $(".onError:first")來進行校驗，而不是通過CheckNull()的返回值進行判斷，當用戶有自定義CSS或禁止CSS時會出現麻煩。
- 結構過渡緊密，把呈現與邏輯關系綁在一起，失去了調整的空間。
針對這些問題，我在新版本中采取了完全不同的思路，並且脫離了jQuery，雖然jQuery非常好用，但是如此簡單的校驗插件，加載jQuery也只是為了在取元素的過程中簡便一點，考慮jQuery本身的體積，有點得不償失，用原生的javascript就足夠簡便了。另外，我把邏輯與呈現徹底分開，讓CheckNull就只是完成校驗字段是否為空，而不控制錯誤信息的呈現。
validator.js version:alpha 2.0
還是同一個函數
.......
function CheckNull(obj, objname)
{
var flag = false;
if (obj.value == null || obj.value == "")
flag = false;
else
flag = true;
if(!flag) //統一的處理方式
tips(obj); //flag=false 顯示錯誤提示信息
else
clear(obj); //flag=true 清除錯誤提示信息
return flag;
}
.......
前端頁面調用並校驗function chkfrm(obj){
with(obj){
var arr = new Array( //把所有校驗的返回值存入數組
CheckNull(name, "用戶名"),
CheckNull(addr, "地址"),
CheckNull(tel, "聯系電話"),
);
if (arr.join("").indexOf("false")<0) //通過join把數組鏈接成字符串
submit(); //如果返回值中沒有false，提交表單
}
}
雖然結構以及程序都非常簡單直白，但是把錯誤呈現都歸納到 tips()中去了，那就可以在維持邏輯關系不變的情況下，只調整 tips()一個函數去控制不同的呈現方式，這樣設計師就可以有多種的選擇，最大限度的保持了插件的靈活性。在後續的版本中還會加入 CheckNull(obj,objname,type) 這樣的調用方式，在tips()內置幾種不同的樣式，通過tips(obj,type)來控制選擇提示信息的樣式。實現同一張表單不同的表單項有不同形式的提示信息。
現在火速提供 alpha 2.0版本下載，希望拋磚引玉，讓這個插件能越來越好。
================ validator.js version:alpha2.0 ================
目前以支持如下函數：
字符串長度校驗： CheckSLen(obj, objname, min_len, max_len);
字符串空校驗： CheckNull(obj, objname);
字符串相等校驗： CheckEqual(obj1, obj2, obj1name, obj2name);
數字范圍校驗： CheckNumRange(obj, objname, min_value, max_value);
Email格式校驗： CheckEmail(obj, objname);
身份證格式校驗： CheckId(obj, objname);
正則表達式校驗： CheckExpression(obj, objname, expression);
========================================================