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

?

1.?DSL?聲明驗證 1

2.?自定義規則 1

3.?正則表達式驗證,可以擴展實現 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.?正則表達式驗證,可以擴展實現

?

拓展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?正則表達式驗證擴展(包括一些經常用到的正則驗證式)_東avaj東_新浪博客.htm

轉載于:https://www.cnblogs.com/attilax/p/5963920.html

總結

以上是生活随笔為你收集整理的atitit.表单验证 的dsl 本质跟 easyui ligerui比较的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。