http://blog.csdn.net/dandanzmc/article/details/36421465

仔细观察jquery.validatebox.js文件，会发现它的验证其实还是采用的正则表达式，比如说验证长度限制吧，在jquery.validatebox.js里面是这么写的：

[javascript] view plaincopy

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，这个文件中的内容如下：

[javascript] view plaincopy

//扩展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控件和正则表达式的更多相关文章

  1. jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法

    博客分类: jquery-easyui jQueryAjax框架HTML  现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...

  2. jquery easyui datebox 时间控件默认显示当前日期的实现方法

    jquery easyui datebox 时间控件默认显示当前日期的实现方法 直接class easyui-datebox后添加一个value="true"就可以

  3. 基于JQuery EasyUI的WebMVC控件封装(含源码)

    JQuery EasyUI类库,大家不会陌生,出来已经有很多年了.个人感觉还是很好用的,作者更新频率也很快,bug也及时修复. 最近在整理以前的代码,找到了这个组件,它是将EasyUI组件封装成MVC ...

  4. 基于MVC4+EasyUI的Web开发框架经验总结（2）- 使用EasyUI的树控件构建Web界面

    最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重 ...

  5. easyui中tree控件添加自定义图标icon

    来源于:http://blog.163.com/lintianhuanhai@126/blog/static/165587366201421704420256/ <!DOCTYPE html&g ...

  6. Easyui动态添加控件无法渲染 $.parser.parse()无效

    本文链接:https://blog.csdn.net/huangbaokang/article/details/78367553动态添加easyui控件<input class="ea ...

  7. EasyUI 中 DataGrid 控件 列 如何绑定对象中的属性

    EasyUI 中 DataGrid 控件 是我们经常用到的控件之一, 但是 DataGrid 控件 在绑定显示列时却不支持对象属性绑定. 模型如下: public class Manager impl ...

  8. jquery的上传控件uploadly,每行都有一个这样的控件对id选择器的使用

    1.先看看预览图 这个是我的页面,其中如果我没点击添加一行的时候,会把本来有的数据进行循环出来,这个时候每个记录都必须有个上传图片的按钮,但是jquery的uploadly这个控件只是锁定id的,至少 ...

  9. 为什么Jquery对input file控件的onchange事件只生效一次

    今天在做jquery对input file控件的onchange事件进行监听,就一直只生效一次,不知道Jquery为什么对file控件没有做到每次改变触发onchange事件的效果,但是还是有好几种解 ...

随机推荐

  1. UITouch的用法

    UITouch一般无法直接获取,是通过UIView的touchesBegan等函数获得. //这四个方法是UIResponder中得方法 // Generally, all responders wh ...

  2. BZOJ 1912 巡逻

    重赋边权. #include<iostream> #include<cstdio> #include<cstring> #include<algorithm& ...

  3. Ubuntu虚机中SVN连接出错，虚机本机可正常CO，CIN，解决方法

    Ubuntu虚机中SVN连接出错,虚机本机可正常CO,CIN,外面机器无法正常连接. 解决: 虚机换个IP即可正常连接,原因不明,有可能为公司网管对该IP做了某些限制. PS:VMware中只需将网络 ...

  4. 结构体，内存，指针例题.DOC

    2015.1.30 递归函数:1.自身调用自己:2.要有结束条件!typedef 后面加分号:一般后面的重定义名加_,例如:typedef unsigned long int uint_16;结构体成 ...

  5. 【Android UI】 Shape详解

    在Android开发过程中,经常需要改变控件的默认样式, 那么通常会使用多个图片来解决.不过这种方式可能需要多个图片,比如一个按钮,需要点击时的式样图片,默认的式样图片. 这样就容易使apk变大. 那 ...

  6. [DP]数位DP总结

     数位DP总结 By Wine93 2013.7 1.学习链接 [数位DP] Step by Step   http://blog.csdn.net/dslovemz/article/details/ ...

  7. 【转】C 宏

    http://www.cs.yale.edu/homes/aspnes/pinewiki/C%282f%29Macros.html See KernighanRitchie Appendix A12. ...

  8. [转]Golang－ import 导入包的语法

    http://blog.csdn.net/zhangzhebjut/article/details/25564457 一 包的导入语法      在写Go代码的时候经常用到import这个命令用来导入 ...

  9. 【转】Paxos算法深入分析

    http://blog.csdn.net/anderscloud/article/details/7175209 在分布式系统设计领域,Paxos可谓是最重要一致性的算法.Google的大牛们称   ...

  10. 故事板(Storyboard) 、 iPad编程 、 App和VC的生命周期

    1 创建动态TableView 1.1 问题 动态表视图就是显示多少分区,多少行以及每一行的显示内容都是根据数据源来决定.之前我们学过用xib展示动态表视图,本案例将学习如何使用Storyboard展 ...