Jquery easyui的validatebox控件和正则表达式
来源:互联网 发布:linux如何调取后台数据 编辑:程序博客网 时间:2024/04/30 03:50
Validatebox是EasyUI的验证控件,它支持很多验证,比如说是否是email、是否是url等,保证我们输入的数据在进行处理前能够确保其完整性和正确性。验证可以实现在数据层和业务规则层,但应当在表现层进行前端的“保护”,因此,我们通常在UI层为用户提供友好的、可以交互的验证体验,避免在应用程序中进行不必要的网络间的往返验证。在前期ASP.NET中,我们接触了六种验证控件,根据这六种验证控件,几乎能够实现所有的验证。那现在说的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,实现你想要的任何一种验证。
- Jquery easyui的validatebox控件和正则表达式
- Jquery easyui的validatebox控件和正则表达式
- Easyui中Validatebox控件和正则表达式
- jQuery-EasyUI validatebox+正则表达式实现验证
- jQuery Easyui Validatebox rules的常用扩展
- jQuery Easyui Validatebox rules的常用扩展
- jQuery Easyui Validatebox rules的常用扩展
- jquery easyUi ValidateBox
- jQuery EasyUI自定义validatebox
- easyui的textbox和validatebox的 赋值
- easyui的textbox和validatebox的赋值
- 扩展validatebox的正则表达式校验器
- easyui的validatebox校验
- easyui的validatebox
- easyUI的validateBox属性
- easyui之validatebox控件分析
- jquery-easyui-validatebox【自定义验证】
- jQuery EasyUI validatebox 验证类型
- Linux下Sublime Text 2的安装
- V4L2 学习笔记1-驱动的注册过程1
- struts2异常 no action named HelloWorld .......
- Preferences写XML文件
- HDFS集中式的缓存管理原理与代码剖析
- Jquery easyui的validatebox控件和正则表达式
- javascript学习笔记1
- bash参考手册之六(Bash特性)
- android 读写sd卡的权限设置
- 我的奋斗
- cocos2d-x 3.1.1 学习笔记[6]ScrollView 可以拖动的Layer
- Java学习之---抽象类与接口
- 如何提取linux kernel的配置文件
- DFA和trie字典树实现敏感词过滤(python和c语言)