此前，我曾經(jīng)寫過一個(gè)基于JQuery的表單校驗(yàn) validator.js ,用了一段時(shí)間發(fā)現(xiàn)出現(xiàn)了一些問題。與大家互相探討一下。 validator.jsp version: alpha 1.0
舉其中一個(gè)驗(yàn)證函數(shù)為例:
......
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");
        }
    });
 }
......

    設(shè)計(jì)這個(gè)驗(yàn)證插件的思路是讓團(tuán)隊(duì)中不太懂JAVASCRIPT的美工人員也可以編寫簡(jiǎn)單的表單驗(yàn)證程序。

    主要原理是，對(duì)參數(shù)中 obj 的三種狀態(tài)進(jìn)行處理。

1.$(obj).ready      當(dāng)obj加載結(jié)束時(shí)，自動(dòng)插入<span>作為提示容器。

2.$(obj).focus      當(dāng)obj獲得焦點(diǎn)時(shí)，提示該字段的輸入規(guī)則。

3.$(obj).blur        當(dāng)obj失去焦點(diǎn)時(shí)，校驗(yàn)字段的合法性。
前端頁面調(diào)用
<script>
        $(document).ready(function(){           //頁面加載后
                CheckNull(account,"用戶名");       //校驗(yàn)用戶名不為空
        });
   
        $("submit").click(function(){
                chkfrm(document.form1);           //id="submit"按鈕添加click事件
        });

        function chkfrm(obj){                        //檢查表單各項(xiàng)
                $("input:text,input:password,select,",obj).each(function(){
                        $(this).blur();
                });
                if ($(".onError:first")==null)
                        obj.submit();                   //沒有錯(cuò)誤就提交表單
                else
                        $(".onError:first").prev().focus();  //第一個(gè)出錯(cuò)項(xiàng)獲得焦點(diǎn)
        }
</script>
    這個(gè)插件雖然在一段時(shí)間里滿足了實(shí)際需要，但是在持續(xù)的使用中，我發(fā)現(xiàn)存在以下幾個(gè)問題：

1.布局不靈活，在 input 后添加提示語句，如果input都是單行的，那沒有問題，但如果是一行當(dāng)中有多個(gè)input 這個(gè)插件的提示效果就很糟糕了。
2.校驗(yàn)觸發(fā)方式存在缺陷，$(this).blur();觸發(fā)校驗(yàn)并不保險(xiǎn)，例如表單有默認(rèn)值無需填寫，用戶不觸發(fā)blur事件前，得不到正確提示。
3.可靠性不強(qiáng)，通過 $(".onError:first")來進(jìn)行校驗(yàn)，而不是通過CheckNull()的返回值進(jìn)行判斷，當(dāng)用戶有自定義CSS或禁止CSS時(shí)會(huì)出現(xiàn)麻煩。
4.結(jié)構(gòu)過渡緊密，把呈現(xiàn)與邏輯關(guān)系綁在一起，失去了調(diào)整的空間。
    針對(duì)這些問題，我在新版本中采取了完全不同的思路，并且脫離了jQuery，雖然jQuery非常好用，但是如此簡(jiǎn)單的校驗(yàn)插件，加載jQuery也只是為了在取元素的過程中簡(jiǎn)便一點(diǎn)，考慮jQuery本身的體積，有點(diǎn)得不償失，用原生的javascript就足夠簡(jiǎn)便了。另外，我把邏輯與呈現(xiàn)徹底分開，讓CheckNull就只是完成校驗(yàn)字段是否為空，而不控制錯(cuò)誤信息的呈現(xiàn)。

validator.js version:alpha 2.0
還是同一個(gè)函數(shù)
.......
function CheckNull(obj, objname)
{
    var flag = false;
    if (obj.value == null || obj.value == "")
            flag = false;
    else
            flag = true;
    if(!flag)                                     //統(tǒng)一的處理方式
            tips(obj);                          //flag=false 顯示錯(cuò)誤提示信息
    else
            clear(obj);                        //flag=true  清除錯(cuò)誤提示信息
    return flag;
}
.......

前端頁面調(diào)用并校驗(yàn)
function chkfrm(obj){
    with(obj){
        var arr = new Array(                    //把所有校驗(yàn)的返回值存入數(shù)組
                CheckNull(name, "用戶名"),
                CheckNull(addr,  "地址"),
                CheckNull(tel,    "聯(lián)系電話"),
        );
        if (arr.join("").indexOf("false")<0)    //通過join把數(shù)組鏈接成字符串
           submit();                                //如果返回值中沒有false，提交表單
    }
}

     雖然結(jié)構(gòu)以及程序都非常簡(jiǎn)單直白，但是把錯(cuò)誤呈現(xiàn)都?xì)w納到 tips()中去了，那就可以在維持邏輯關(guān)系不變的情況下，只調(diào)整 tips()一個(gè)函數(shù)去控制不同的呈現(xiàn)方式，這樣設(shè)計(jì)師就可以有多種的選擇，最大限度的保持了插件的靈活性。在后續(xù)的版本中還會(huì)加入 CheckNull(obj,objname,type) 這樣的調(diào)用方式，在tips()內(nèi)置幾種不同的樣式，通過tips(obj,type)來控制選擇提示信息的樣式。實(shí)現(xiàn)同一張表單不同的表單項(xiàng)有不同形式的提示信息。

現(xiàn)在火速提供 alpha 2.0版本下載，希望拋磚引玉，讓這個(gè)插件能越來越好。

================ validator.js  version:alpha2.0 ================

目前以支持如下函數(shù)：

字符串長(zhǎng)度校驗(yàn)：    CheckSLen(obj, objname, min_len, max_len);

字符串空校驗(yàn)：       CheckNull(obj, objname);

字符串相等校驗(yàn)：    CheckEqual(obj1, obj2, obj1name, obj2name);

數(shù)字范圍校驗(yàn)：       CheckNumRange(obj, objname, min_value, max_value);

Email格式校驗(yàn)：      CheckEmail(obj, objname);

SFZ格式校驗(yàn)：    CheckId(obj, objname);

正則表達(dá)式校驗(yàn)：    CheckExpression(obj, objname, expression);

========================================================

該文章在 2010/8/17 23:34:28 編輯過