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

atitit.表单验证 的dsl 本质跟 easyui ligerui比较的更多相关文章

  1. atittit.表单验证的实现方式以及原理本质以及选型以及自定义兼容easyui dsl规则的表单验证

    atittit.表单验证的实现方式以及原理本质以及选型以及自定义兼容easyui dsl规则的表单验证 1. 需求,表单验证需要弹框式,但目前easyui ms绑定死了tooltip式样 1 2. 表 ...

  2. atittit.表单验证性质的原则和实施,以及选择和定义自己的兼容easyui dsl窗体身份验证规则

    atittit.表单验证性质的原则和实施,以及选择和定义自己的兼容easyui dsl规则的表单验证 1. 需求,表单验证须要弹框式,但眼下easyui ms绑定死了tooltip式样 1 2. 表单 ...

  3. AngularJS系列:表单全解(表单验证,radio必选,三级联动,check绑定,form提交验证)

    一.查看$scope -->寻找Form控制变量的位置 Form控制变量 格式:form的name属性.input的name属性.$... formName.inputField.$pristi ...

  4. python_way day19 HTML-day5 (form表单验证,CSRF,cookie,session,缓存)

    python-way day19 1. dJango的form表单验证 2.CSRF 跨站请求伪造 3.cookie,session 4.缓存 一,django表单验证功能 1.django验证基础: ...

  5. jQuery html5Validate基于HTML5表单验证插件

    更新于2016-02-25 前面提到的新版目前线上已经可以访问: http://mp.gtimg.cn/old_mp/assets/js/common/ui/Validate.js demo体验狠狠地 ...

  6. Django基础之Form表单验证

    Form表单验证 1.创建Form类(本质就是正则表达式的集合) from django.forms import Form from django.forms import fields from ...

  7. jQuery学习之路(8)- 表单验证插件-Validation

    ▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...

  8. 玩转spring boot——AOP与表单验证

    AOP在大多数的情况下的应用场景是:日志和验证.至于AOP的理论知识我就不做赘述.而AOP的通知类型有好几种,今天的例子我只选一个有代表意义的“环绕通知”来演示. 一.AOP入门 修改“pom.xml ...

  9. form表单验证-Javascript

    Form表单验证: js基础考试内容,form表单验证,正则表达式,blur事件,自动获取数组,以及css布局样式,动态清除等.完整代码如下: <!DOCTYPE html PUBLIC &qu ...

随机推荐

  1. C#中TreeView与数据库绑定

    protected void CreateTreeView() { TreeNode rootNode = new TreeNode(); rootNode.Text = "全部" ...

  2. Selenium2+python自动化6-八种元素元素定位(Firebug和firepath)

    前言 自动化只要掌握四步操作:获取元素,操作元素,获取返回结果,断言(返回结果与期望结果是否一致),最后自动出测试报告.本篇主要讲如何用firefox辅助工具进行元素定位. 元素定位在这四个环节中是至 ...

  3. H5-考试判断题

    1.所有的元素设置了浮动后都可以设置宽高. 2.行元素都不能设置宽高跟上下边距 3.所有的css样式优先级中“!important”优先级最高(及其不推荐使用) 4.改变元素的transition值, ...

  4. 在ASP.NET中引用自定义提示框

    在html网页中自定义提示框 正文: 在一般的B/S架构中项目,与用户的交互信息是非常重要的.在一般的情况下,设计人员都在把用户信息呈现在html中,用div和span去弹出相关信息.对于一般的情况而 ...

  5. 小甲鱼python视频第十讲(课后习题)

    1.list1[0]与list1[0:1]的区别 2.分片的步长 3关于列表的copy(注意list2与list3的区别) list1 = [,,,,,,] list2 = list1[:] list ...

  6. C语言 1 << 0 是什么意思

    1 << 0 是把1 按2进制 左移0位,结果还是 1 ,2进制 0000 00011 << 1, 是把1 按2进制 左移1位,结果是2,2进制 0000 0010

  7. 阿里巴巴Json工具-Fastjson讲解

    Fastjson是阿里巴巴公司开源的速度最快的Json和对象转换工具,一个Java语言编写的JSON处理器. 1.遵循http://json.org标准,为其官方网站收录的参考实现之一.2.功能qia ...

  8. 安装spy-debugger

  9. c#开发Mongo笔记第四篇

    今天是个伟大的日子,不得不说小苹果的歌词真是深入人心啊. 不过今天伟大并不是因为我种下一颗种子,而是我从今天不再写demo,而是进入项目的正式开发当中,毕竟项目时间有限(想必各位码农也都深有体会吧), ...

  10. ASP.NET访问网络映射盘&实现文件上传读取功能

    最近在改Web的时候,遇到一个问题,要跨机器访问共享文件夹,以实现文件正常上传下载功能. 要实现该功能,可以采用HTTP的方式,也可以使用网络映射磁盘的方式,今天主要给大家分享一下使用网络映射磁盘的方 ...