Jquery easyui的validatebox控件和正则表达式
仔细观察jquery.validatebox.js文件，会发现它的验证其实还是采用的正则表达式，比如说验证长度限制吧，在jquery.validatebox.js里面是这么写的：
length:{validator:function(_2d,_2e){ var len=$.trim(_2d).length; return len>=_2e[0]&&len<=_2e[1]; },message:"Please enter a value between {0} and {1}."} 至于，界面效果，我就不用说了。
Validatebox控件提供的验证有限，如果我们想要更多的验证表达式，该怎么办？是不是能够改写
jquery.validatebox.js文件，按照jquery.validatebox.js文件中的格式，为这个控件提供更多的验证效果。
经过一番实验和查找，还真有办法来为这个Validatebox控件提供更多的验证信息，具体操作如下。
对
jquery.validatebox.js进行扩展，新建js文件，可以取名为：validatebox.js，这个文件中的内容如下：
//扩展easyui表单的验证 $.extend($.fn.validatebox.defaults.rules, { //验证汉字 CHS: { validator: function (value) { return /^[\u0391-\uFFE5]+$/.test(value); }, message: 'The input Chinese characters only.' }, //移动手机号码验证 Mobile: {//value值为文本框中的值 validator: function (value) { var reg = /^1[3|4|5|8|9]\d{9}$/; return reg.test(value); }, message: 'Please enter your mobile phone number correct.' }, //国内邮编验证 ZipCode: { validator: function (value) { var reg = /^[0-9]\d{5}$/; return reg.test(value); }, message: 'The zip code must be 6 digits and 0 began.' }, //数字 Number: { validator: function (value) { var reg =/^[0-9]*$/; return reg.test(value); }, message: 'Please input number.' }, }) HTML页面：
<!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title>Basic ValidateBox - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <link rel="stylesheet" type="text/css" href="../demo.css"> <script type="text/javascript" src="../../jquery.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script> <script src="validatebox.js" type="text/javascript"></script> <!--引入刚创建的js文件--> </head> <body> <h2>常用验证格式</h2> <div style="margin:20px 0;"></div> <div class="easyui-panel" title="Register" style="width:400px;padding:10px 60px 20px 60px"> <table cellpadding="10"> <tr> <td>User Name:</td> <td><input class="easyui-validatebox textbox" data-options="required:true,validType:'length[3,10]'"></td> </tr> <tr> <td>Email:</td> <td><input class="easyui-validatebox textbox" data-options="required:true,validType:'email'"></td> </tr> <tr> <td>Birthday:</td> <td><input class="easyui-datebox textbox"></td> </tr> <tr> <td>URL:</td> <td><input class="easyui-validatebox textbox" data-options="required:true,validType:'url'"></td> </tr> <tr> <td>Mobile:</td> <td><input class="easyui-validatebox textbox" data-options="required:true,validType:'Mobile'"></td> </tr> <tr> <td>Length:</td> <td><input class="easyui-validatebox" data-options="required:true,validType:'length[0,2]'"></td> </tr> <tr> <td>Chinese:</td> <td><input name="txtName" class="easyui-validatebox" data-options="required:'true',validType:'CHS'"></td> </tr> <tr> <td>ZipCode:</td> <td><input name="txtName" class="easyui-validatebox" data-options="required:'true',validType:'ZipCode'"></td> </tr> <tr> <td>Number:</td> <td><input name="txtName" class="easyui-validatebox" data-options="required:'true',validType:'Number'"></td> </tr> </table> </div> <style scoped="scoped"> .textbox{ height:20px; margin:0; padding:0 2px; box-sizing:content-box; } </style> 实现效果如下：
总结
根据验证表达式，扩展
Validatebox默认的验证类型，然后修改Validatebox的属性——validType，实现你想要的任何一种验证。
Validatebox是EasyUI的验证控件，它支持很多验证，比如说是否是email、是否是url等，保证我们输入的数据在进行处理前能够确保其 完整性和正确性。验证可以实现在数据层和业务规则层，但应当在表现层进行前端的“保护”，因此，我们通常在UI层为用户提供友好的、可以交互的验证体验， 避免在应用程序中进行不必要的网络间的往返验证。在前期ASP.NET中，我们接触了六种验证控件，根据这六种验证控件，几乎能够实现所有的验证。那现在 说的Validatebox是怎么实现验证的呢？
Jquery easyui的validatebox控件和正则表达式的更多相关文章
- jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
博客分类: jquery-easyui jQueryAjax框架HTML 现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...
- jquery easyui datebox 时间控件默认显示当前日期的实现方法
jquery easyui datebox 时间控件默认显示当前日期的实现方法 直接class easyui-datebox后添加一个value="true"就可以
- 基于JQuery EasyUI的WebMVC控件封装(含源码)
JQuery EasyUI类库,大家不会陌生,出来已经有很多年了.个人感觉还是很好用的,作者更新频率也很快,bug也及时修复. 最近在整理以前的代码,找到了这个组件,它是将EasyUI组件封装成MVC ...
- 基于MVC4+EasyUI的Web开发框架经验总结（2）- 使用EasyUI的树控件构建Web界面
最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重 ...
- easyui中tree控件添加自定义图标icon
来源于:http://blog.163.com/lintianhuanhai@126/blog/static/165587366201421704420256/ <!DOCTYPE html&g ...
- Easyui动态添加控件无法渲染 $.parser.parse()无效
本文链接:https://blog.csdn.net/huangbaokang/article/details/78367553动态添加easyui控件<input class="ea ...
- EasyUI 中 DataGrid 控件 列 如何绑定对象中的属性
EasyUI 中 DataGrid 控件 是我们经常用到的控件之一, 但是 DataGrid 控件 在绑定显示列时却不支持对象属性绑定. 模型如下: public class Manager impl ...
- jquery的上传控件uploadly,每行都有一个这样的控件对id选择器的使用
1.先看看预览图 这个是我的页面,其中如果我没点击添加一行的时候,会把本来有的数据进行循环出来,这个时候每个记录都必须有个上传图片的按钮,但是jquery的uploadly这个控件只是锁定id的,至少 ...
- 为什么Jquery对input file控件的onchange事件只生效一次
今天在做jquery对input file控件的onchange事件进行监听,就一直只生效一次,不知道Jquery为什么对file控件没有做到每次改变触发onchange事件的效果,但是还是有好几种解 ...
随机推荐
- phpunit+selenium环境搭建
这个环境搭建遇到了挺多麻烦,最终还是没能自己解决,幸好有同事“青蛙”的帮忙解决了这个问题!在这里把本人亲测步骤给大家列一下,希望给大家提供方便! 安装pear: Go-pear.phar下载地址:ht ...
- android onclick onLongClick ontouch dispatchTouchEvent onInterceptTouchEvent
android onclick onLongClick ontouch dispatchTouchEvent onInterceptTouchEvent 按ACTION_DOWN -> onLo ...
- Qt发送HTTP请求
http://hi.baidu.com/cmdmac/item/c45b9f0fb0d0938802ce1bbd 最近在搞QT跟服务器交互的东西,自然少不了发送和接受HTTP请求.在网上找了一些资料知 ...
- BZOJ 1271 秦腾与教学评估
二分. #include<iostream> #include<cstdio> #include<cstring> #include<algorithm> ...
- Windows系统下安装Beautiful Soup4的步骤和方法
1.到http://www.crummy.com/software/BeautifulSoup/网站上下载,最新版本是4.3.2. 2.下载完成之后需要解压缩,假设放到D:\Python27下. 3. ...
- 微信Accesstoken通过xml文件方式保存
//获取accessToken public static AccessToken GetAccessToken() { string AppID = JobBase.GetConfParamValu ...
- POJ2449 （k短路）
#include <cstdio> #include <cstring> #include <cmath> #include <algorithm> # ...
- 如何配置magento免运费商品方法
作为magento电商来说,免运费是一种常见的促销手段,要让产品成为免运费对magento来说并不难,后台操作即可完成. 首先,我们要建立一个新的产品属性. catalog->attribute ...
- IOS的MVC
1 翻牌游戏 1.1 问题 根据苹果MVC设计模式的思想原则实现一个简单的翻牌游戏,功能如下: 1)界面上随机摆放12张背面朝上的纸牌,界面效果如图-1所示: 图- 1 2)点击纸牌可以使纸牌翻页,翻 ...
- NSDictionary 、 NSMutableDictionary
1 重构学生与学校的练习 1.1 问题 本案例要求用字典解决下述问题.问题是:有一个学校,该学校有两个学院,每个学院中又有两个班级,而在每个班级中有两名学生. 现在作如下要求: 1)显示所有学生的信息 ...