atitit.表单验证 的dsl 本质跟 easyui ligerui比较

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