欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

　　此前，我曾經寫過一個基于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 的三種狀態進行處理。

1.$(obj).ready      當obj加載結束時，自動插入<span>作為提示容器。

2.$(obj).focus      當obj獲得焦點時，提示該字段的輸入規則。

3.$(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>
    這個插件雖然在一段時間里滿足了實際需要，但是在持續的使用中，我發現存在以下幾個問題：

1.布局不靈活，在 input 后添加提示語句，如果input都是單行的，那沒有問題，但如果是一行當中有多個input 這個插件的提示效果就很糟糕了。
2.校驗觸發方式存在缺陷，$(this).blur();觸發校驗并不保險，例如表單有默認值無需填寫，用戶不觸發blur事件前，得不到正確提示。
3.可靠性不強，通過 $(".onError:first")來進行校驗，而不是通過CheckNull()的返回值進行判斷，當用戶有自定義CSS或禁止CSS時會出現麻煩。
4.結構過渡緊密，把呈現與邏輯關系綁在一起，失去了調整的空間。
    針對這些問題，我在新版本中采取了完全不同的思路，并且脫離了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);

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

正則表達式校驗：    CheckExpression(obj, objname, expression);

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

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