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

?

1.?DSL?聲明驗證 1

2.?自定義規(guī)則 1

3.?正則表達式驗證,可以擴展實現(xiàn) 2

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

5.?Prevent?the?form?to?submit?when?invalid 3

6.?為空則不驗證，不為空則驗證，的實現(xiàn) 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">

?

驗證規(guī)則

驗證規(guī)則使用required和validType屬性來定義,?以下列出的是插件內置的驗證規(guī)則。

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

2?url:?正則匹配url。

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

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

?

?

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

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

?

2.?自定義規(guī)則

要自定義規(guī)則，重載$.fn.validatebox.defaults。你所定義的驗證規(guī)則必須定義一個驗證函數(shù)和驗證無效時的提示信息。?例如，定義一個驗證最小長度的規(guī)則：

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?});??

現(xiàn)在你可以使用最小長度驗證規(guī)則來定義一個至少要輸入5個字符的輸入框。

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

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

屬性

?

3.?正則表達式驗證,可以擴展實現(xiàn)

?

拓展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（字符串）	當表單域未填寫時出現(xiàn)的提示信息。	This?field?is?required.
invalidMessage（無效提示）	string（字符串）	當表單域的內容被驗證為無效時出現(xiàn)的提示。	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.?為空則不驗證，不為空則驗證，的實現(xiàn)

現(xiàn)在是不適合的，還要自己擴展規(guī)則。?
但email，url，電話這種很多時候需求都是允許為空的。

重載一下驗證規(guī)則:

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比较的全部內容，希望文章能夠幫你解決所遇到的問題。

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