最新消息:ocsen.wang域名正式启用了!

Jquery easyui的validatebox控件和正则表达式

JavaScript ocsen 2610浏览

Validatebox是EasyUI的验证控件,它支持很多验证,比如说是否是email、是否是url等,保证我们输入的数据在进行处理前能够确保其完整性和正确性。验证可以实现在数据层和业务规则层,但应当在表现层进行前端的“保护”,因此,我们通常在UI层为用户提供友好的、可以交互的验证体验,避免在应用程序中进行不必要的网络间的往返验证。在前期ASP.NET中,我们接触了六种验证控件,根据这六种验证控件,几乎能够实现所有的验证。那现在说的Validatebox是怎么实现验证的呢?

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

  1. length:{validator:function(_2d,_2e){
  2. var len=$.trim(_2d).length;
  3. return len>=_2e[0]&&len<=_2e[1];
  4. },message:“Please enter a value between {0} and {1}.”}

至于,界面效果,我就不用说了。

Validatebox控件提供的验证有限,如果我们想要更多的验证表达式,该怎么办?是不是能够改写jquery.validatebox.js文件,按照jquery.validatebox.js文件中的格式,为这个控件提供更多的验证效果。

经过一番实验和查找,还真有办法来为这个Validatebox控件提供更多的验证信息,具体操作如下。

对jquery.validatebox.js进行扩展,新建js文件,可以取名为:validatebox.js,这个文件中的内容如下:

  1. //扩展easyui表单的验证
  2. $.extend($.fn.validatebox.defaults.rules,{
  3. //验证汉字
  4. CHS:{
  5. validator:function(value){
  6. return/^[\u0391-\uFFE5]+$/.test(value);
  7. },
  8. message:‘The input Chinese characters only.’
  9. },
  10.  
  11. //字符验证
  12. stringCheck:{
  13. validator:function(value){
  14. return/^[\u0391-\uFFE5\w]+$/.test(value);
  15. },
  16. message:“只能包括中文字、英文字母、数字和下划线.”
  17. },
  18. //验证中文,英文,数字
  19. stringCheckSub:{
  20. validator:function(value){
  21. return/^[a-zA-Z0-9\u4E00-\u9FA5]+$/.test(value);
  22. },
  23. message:“只能包括中文字、英文字母、数字.”
  24. },
  25. englishCheckSub:{
  26. validator:function(value){
  27. return/^[a-zA-Z0-9]+$/.test(value);
  28. },
  29. message:“只能包括英文字母、数字.”
  30. },
  31. //移动手机号码验证
  32. Mobile:{//value值为文本框中的值
  33. validator:function(value){
  34. var reg =/^1[3|4|5|8|9]\d{9}$/;
  35. return reg.test(value);
  36. },
  37. message:‘Please enter your mobile phone number correct.’
  38. },
  39. //国内邮编验证
  40. ZipCode:{
  41. validator:function(value){
  42. var reg =/^[0-9]\d{5}$/;
  43. return reg.test(value);
  44. },
  45. message:‘The zip code must be 6 digits and 0 began.’
  46. },
  47. //数字
  48. Number:{
  49. validator:function(value){
  50. var reg =/^[0-9]*$/;
  51. return reg.test(value);
  52. },
  53. message:‘Please input number.’
  54. },
  55. })

HTML页面:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <metacharset=“gb2312″>
  5. <title>Basic ValidateBox – jQuery EasyUI Demo</title>
  6. <linkrel=“stylesheet”type=“text/css”href=“../../themes/default/easyui.css”>
  7. <linkrel=“stylesheet”type=“text/css”href=“../../themes/icon.css”>
  8. <linkrel=“stylesheet”type=“text/css”href=“../demo.css”>
  9. <scripttype=“text/javascript”src=“../../jquery.min.js”></script>
  10. <scripttype=“text/javascript”src=“../../jquery.easyui.min.js”></script>
  11.  
  12. <scriptsrc=“validatebox.js”type=“text/javascript”></script><!–引入刚创建的js文件–>
  13.  
  14. </head>
  15. <body>
  16.  
  17. <h2>常用验证格式</h2>
  18. <divstyle=margin:20px0;></div>
  19. <divclass=“easyui-panel”title=“Register”style=width:400px;padding:10px60px20px60px>
  20. <tablecellpadding=“10”>
  21. <tr>
  22. <td>User Name:</td>
  23. <td><inputclass=“easyui-validatebox textbox”data-options=“required:true,validType:’length[3,10]'”></td>
  24. </tr>
  25. <tr>
  26. <td>Email:</td>
  27. <td><inputclass=“easyui-validatebox textbox”data-options=“required:true,validType:’email'”></td>
  28. </tr>
  29. <tr>
  30. <td>Birthday:</td>
  31. <td><inputclass=“easyui-datebox textbox”></td>
  32. </tr>
  33. <tr>
  34. <td>URL:</td>
  35. <td><inputclass=“easyui-validatebox textbox”data-options=“required:true,validType:’url'”></td>
  36. </tr>
  37. <tr>
  38. <td>Mobile:</td>
  39. <td><inputclass=“easyui-validatebox textbox”data-options=“required:true,validType:’Mobile'”></td>
  40. </tr>
  41. <tr>
  42. <td>Length:</td>
  43. <td><inputclass=“easyui-validatebox”data-options=“required:true,validType:’length[0,2]'”></td>
  44. </tr>
  45. <tr>
  46. <td>Chinese:</td>
  47. <td><inputname=“txtName”class=“easyui-validatebox”data-options=“required:’true’,validType:’CHS'”></td>
  48.  
  49. </tr>
  50.  
  51. <tr>
  52. <td>ZipCode:</td>
  53. <td><inputname=“txtName”class=“easyui-validatebox”data-options=“required:’true’,validType:’ZipCode'”></td>
  54.  
  55. </tr>
  56. <tr>
  57. <td>Number:</td>
  58. <td><inputname=“txtName”class=“easyui-validatebox”data-options=“required:’true’,validType:’Number'”></td>
  59.  
  60. </tr>
  61.  
  62. </table>
  63. </div>
  64. <stylescoped=“scoped”>
  65. .textbox{
  66. height:20px;
  67. margin:0;
  68. padding:02px;
  69. box-sizing:content-box;
  70. }
  71. </style>

实现效果如下:

总结

根据验证表达式,扩展Validatebox默认的验证类型,然后修改Validatebox的属性——validType,实现你想要的任何一种验证。

转载请注明:Ocsen-因上努力,果上随缘 » Jquery easyui的validatebox控件和正则表达式

111