atitit.表單驗證 的dsl 本質跟 easyui ligerui比較，atititeasyui

atitit.表單驗證 的dsl 本質跟 easyui ligerui比較，atititeasyui

atitit.表單驗證的dsl 本質跟 easyui ligerui比較 

 

1. DSL 聲明驗證 1

2. 自訂規則 1

3. Regex驗證,可以擴充實現 2

4. 犯錯誤訊息提示,generic canBeEmpty is good 3

5. Prevent the form to submit when invalid 3

6. 為空白則不驗證，不為空白則驗證，的實現 5

7. 參考 6

 

 

1. DSL 聲明驗證

 <input class="easyui-validatebox" type="text" name="email" required="true" validType="email"></input>

We add a class named easyui-validatebox to input markup so the input markup will be applied the validation according the validType attribute.

 

 

Liger

<input ligeruiid="txtName" style="width: 174px;" class="l-text-field" name="txtName" id="txtName" ltype="text" validate="{required:true,minlength:3,maxlength:10}" type="text">

 

驗證規則

驗證規則使用required和validType屬性來定義, 以下列出的是外掛程式內建的驗證規則。

1 email: 正則匹配電子郵件。

2 url: 正則匹配url。

3 length[0,100]: 驗證長度範圍。

4 remote['http://.../action.do','paramName']: 發送ajax請求來驗證，驗證有效時返回true。

 

 

作者:: 老哇的爪子 Attilax 艾龍，  EMAIL:1466519819@qq.com

轉載請註明來源： http://blog.csdn.net/attilax

 

2. 自訂規則

要自訂規則，重載$.fn.validatebox.defaults。你所定義的驗證規則必須定義一個驗證函式和驗證無效時的提示資訊。 例如，定義一個驗證最小長度的規則：

5 $.extend($.fn.validatebox.defaults.rules, {   

6     minLength: {   

7         validator: function(value, param){   

8             return value.length >= param[0];   

9         },   

10         message: 'Please enter at least {0} characters.'  

11     }   

12 });  

現在你可以使用最小長度驗證規則來定義一個至少要輸入5個字元的輸入框。

13 <input class="easyui-validatebox" validType="minLength[5]">  

14 此處的validType=“minLength[5]”，設定可能無效，可設定為validType="length[3,8]",填入的值在3~8個字元之間

屬性

 

3. Regex驗證,可以擴充實現

 

拓展2

$.extend($.fn.validatebox.defaults.rules,{

   idcard : {// 驗證身份證 

       validator : function(value) { 

           return/^\d{15}(\d{2}[A-Za-z0-9])?$/i.test(value); 

       }, 

       message : '社會安全號碼碼格式不正確' 

   },

 

4. 犯錯誤訊息提示,generic canBeEmpty is good

 

屬性

名稱	類型	描述	預設值
required（必填）	boolean（布爾型）	定義表單域必須填寫。	false
validType（驗證類型）	string（字串）	定義表單域的驗證類型，比如：email, url等。	null
missingMessage（未填提示）	string（字串）	當表單域未填寫時出現的提示資訊。	This field is required.
invalidMessage（無效提示）	string（字串）	當表單域的內容被驗證為無效時出現的提示。	null

 

 

 

Liger::::deft is this field is not be empty ,,jsig haon normall....generic...

5. Prevent the form to submit when invalid

When users click the submit button of form, we should prevent the form to submit if the form is invalid.

15 $('#ff').form({

16 url:'form3_proc.php',

17 onSubmit:function(){

18 return $(this).form('validate');

19 },

20 success:function(data){

21 $.messager.alert('Info', data, 'info');

22 }

23 });

If the form is invalid, a tooltip message will show.

--------liger

 

        $(function ()

        {

            $.metadata.setType("attr", "validate");

            var v = $("form").validate({

                debug: true,

                errorPlacement: function (lable, element)

                {

                    if (element.hasClass("l-textarea"))

                    {

                        element.ligerTip({ content: lable.html(), target: element[0] });

                    }

                    else if (element.hasClass("l-text-field"))

                    {

                        element.parent().ligerTip({ content: lable.html(), target: element[0] });

                    }

                    else

                    {

                        lable.appendTo(element.parents("td:first").next("td"));

                    }

                },

                success: function (lable)

                {

                    lable.ligerHideTip();

                    lable.remove();

                },

                submitHandler: function ()

                {

                    $("form .l-text,.l-textarea").ligerHideTip();

                    alert("Submitted!")

                }

            });

            $("form").ligerForm();

            $(".l-button-test").click(function ()

            {

                alert(v.element($("#txtName")));

            });

        }); 

 

 

6. 為空白則不驗證，不為空白則驗證，的實現

現在是不適合的，還要自己擴充規則。 
但email，url，電話這種很多時候需求都是允許為空白的。

重載一下驗證規則:

Js代碼  

24 $.extend($.fn.validatebox.defaults.rules, {  

25     email:{  

26         validator:function(value,param){  

27             if (value){  

28                 return /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/.test(value);  

29             } else {  

30                 return true;  

31             }  

32         },  

33         message:'Please enter a valid email address.'  

34     },  

35     url:{  

36         validator:function(value,param){  

37             if (value){  

38                 return /(((https?)|(ftp)):\/\/([\-\w]+\.)+\w{2,3}(\/[%\-\w]+(\.\w{2,})?)*(([\w\-\.\?\\\/+@&#;`~=%!]*)(\.\w{2,})?)*\/?)/i.test(value);  

39             } else {  

40                 return true;  

41             }  

42         },  

43         message:'Please enter a valid URL.'  

44     }  

45 });  

  

 

 

 

7. 參考

擴充easyui 的表單驗證 - 瘋狂秀才 - 部落格園.htm

easyui Regex驗證擴充(包括一些經常用到的正則驗證式)_東avaj東_新浪部落格.htm

JQuery ligerui與JQuery easyui哪個載入速度比較快？

不推薦使用ligerui。
這個套件是個殘次品，作者對於其中的很多bug都不修複了，需要自己發現哪自己改，如果dom編程不到爐火純青的地步，不推薦使用這款。感覺作者根本沒打算把這個產品正兒八經的推行或者完善，做出來是什麼樣就什麼樣了，無可否認，技術含量很高，但是這個態度讓人望而卻步。
easyui吧。起碼使用的人多，出了問題也好查。當然，如果您認為自己能夠應付互連網上大部分js編程問題，用ligerui也無不可
 
jquery easyui與jquery ligerui哪個比較全面？指點

easyui學習起來比較簡單，官方文檔說明非常清楚，而且功能確實非常強大，建議使用easyui.