jQuery插件EasyUI校验规则 validatebox验证框


Posted in Javascript onNovember 29, 2015

Web前端数据校验组件

Web项目中客户端与服务端的交互离不开Form表单,Form表单中最常用的元素莫过于input标签,input标签首先要用的肯定是text文本框啦!

input文本框允许用户任意输入,难免会会有用户输入一些不符合规定的数据,此时,在提交之前对数据校验是很有必要的,如果等到提交到服务端再校验就会大大降低用户体验啦。

前端校验有很多现成的组件,比较好用的有 EasyUI 的 validatebox 插件,提示界面做的相当友好,只是validatebox 默认提供的校验规则比较有限,有时我们需要添加自己的校验规则。

rules: {
  email:{
  validator: function(value){
   return ...?$/i.test(value);
  },
  message: 'Please enter a valid email address.'
  },
  url: {
  validator: function(value){
   return ...?$/i.test(value);
  },
  message: 'Please enter a valid URL.'
  },
  length: {
  validator: function(value, param){
   var len = $.trim(value).length;
   return len >= param[0] && len <= param[1]
  },
  message: 'Please enter a value between {0} and {1}.'
  },
  remote: {
  validator: function(value, param){
   var data = {};
   data[param[1]] = value;
   var response = $.ajax({
   url:param[0],
   dataType:'json',
   data:data,
   async:false,
   cache:false,
   type:'post'
   }).responseText;
   return response == 'true';
  },
  message: 'Please fix this field.'
  }
 },

自定义校验规则

添加新的校验规则时最好不要在EasyUI的源文件中进行,第一是避免因误操作而导致污染了EasyUi源码,更重要的是考虑到以后容易进行组件升级。所以最合理的办法是单独写自己的扩展文件。

比如:我在原有规则的基础上新增了以下三项校验,单独文件 easyui-extend-rcm.js:

(function($) {
 /**
 * jQuery EasyUI 1.4 --- 功能扩展
 * 
 * Copyright (c) 2009-2015 RCM
 *
 * 新增 validatebox 校验规则
 *
 */
 $.extend($.fn.validatebox.defaults.rules, {
 idcard: {
  validator: function(value, param) {
  return idCardNoUtil.checkIdCardNo(value);
  },
  message: '请输入正确的身份证号码'
 },
 checkNum: {
  validator: function(value, param) {
  return /^([0-9]+)$/.test(value);
  },
  message: '请输入整数'
 },
 checkFloat: {
  validator: function(value, param) {
  return /^[+|-]?([0-9]+\.[0-9]+)|[0-9]+$/.test(value);
  },
  message: '请输入合法数字'
 }
 });
})(jQuery);

自定义规则使用方式
在中除了引入EasyUI的文件之外,还要引入自己的扩展文件,顺序在EasyUI文件之后:
<pre name="code" class="javascript"><span style="font-size:18px;"><script src="#WEBROOT

()/static/jseasyui/jquery.easyui.min.js" type="text/javascript" ></script>
<script src="#WEBROOT()/static/js/comm/easyui-extend-rcm.js" type="text/javascript"></script></span></pre>
<pre class="brush:java;"></pre>
然后在Html中如下引用即可,一定要加Class 和 data-options两个属性:<br>
<br>
<p></p><pre class="brush:java;"><pre name="code" class="<a href=" http:="" 3water.com="" kf="" qianduan="" css="" "="" target="_blank">html"><span style="font-size:18px;"><div id="dlg" class="easyui-dialog" style="width:300px; height:300px; vertical-align: middle;" closed="true" title="'添加中药'" buttons="#dlg-buttons">
 <div id="editForm" style="background:'';padding:20px;width:200px;height:200px; display:none;">
 <form id="form" method="post">
  <div style="padding-left:16px;padding-top:20px;" hidden="true">
  <input type="text" name="dlg_drugId" id="dlg_drugId" hidden="true">
  </div>
  <div style="padding-top:10px;padding-left:40px;">
  <label for="dlg_name">药物:</label>
  <input type="text" name="dlg_name" id="dlg_name" class="easyui-validatebox" readonly="readonly">
  </div>
  <div style="padding-top:10px;padding-left:40px;">
  <label for="dlg_price">单价:</label>
  <input type="text" name="dlg_price" id="dlg_price" <span="" style="color:#ff0000;">class="easyui-validatebox" data-options="required:true,validType:'checkFloat'" />
  </div>
  <div style="padding-top:10px;padding-left:40px;">
  <label for="dlg_purchase_price">进价:</label>
  <input type="text" name="dlg_purchase_price" id="dlg_purchase_price" <span="" style="color:#ff0000;">class="easyui-validatebox" data-options="validType:'checkFloat'" />
  </div>
  <div style="padding-top:10px;padding-left:40px;">
  <label for="dlg_stock">库存:</label>
  <input type="text" name="dlg_stock" id="dlg_stock" <span="" style="color:#ff0000;">class="easyui-validatebox" data-options="validType:'checkNum'" />
  </div>
  <div style="padding-top:10px;padding-left:40px;" align="center">
  <input type="button" value="保存" onclick="saveTCMDrugPublicMapped()" class="bt_style">
  </div>
 </form>
 </div>
</div></span></pre><br>
<br>
<p></p>
<pre class="brush:java;"></pre>
<p></p>
<h1>数据校验显示效果</h1>
<p>效果如下图所以:</p>
<p><img src="20150130/20150130084015121.png" alt="" style="width: 378px; height: 213px;"><br>
</p>   </pre>

希望通过这篇文章的学习对jQuery EasyUI validatebox校验规则更加了解。

Javascript 相关文章推荐
js 解决“options为空或不是对象”
Dec 22 Javascript
JavaScript 异步调用框架 (Part 2 - 用例设计)
Aug 03 Javascript
JavaScript 对象成员的可见性说明
Oct 16 Javascript
JS焦点图切换,上下翻转
May 12 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
Nov 28 Javascript
使用jQuery简单实现模拟浏览器搜索功能
Dec 21 Javascript
JS实现文件动态顺序载入的方法
Mar 07 Javascript
JS前端笔试题分析
Dec 19 Javascript
在vue项目中,使用axios跨域处理
Mar 07 Javascript
Vue.js数字输入框组件使用方法详解
Oct 19 Javascript
浅谈layui 绑定form submit提交表单的注意事项
Oct 25 Javascript
JS如何使用剪贴板操作Clipboard API
May 17 Javascript
实例解析jQuery插件EasyUI最常用的表单验证规则
Nov 29 #Javascript
整理Javascript流程控制语句学习笔记
Nov 29 #Javascript
基于javascript代码实现通过点击图片显示原图片
Nov 29 #Javascript
整理Javascript数组学习笔记
Nov 29 #Javascript
Bootstrap每天必学之缩略图与警示窗
Nov 29 #Javascript
分享我的jquery实现下拉菜单心的
Nov 29 #Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
Nov 29 #Javascript
You might like
PHP实现正则表达式分组捕获操作示例
2018/02/03 PHP
php更新cookie内容的详细方法
2019/09/30 PHP
jquery 弹出层注册页面等(asp.net后台)
2010/06/17 Javascript
javascript 运算数的求值顺序
2011/08/23 Javascript
jquery按回车提交数据的代码示例
2013/11/05 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
2014/01/09 Javascript
javascript:window.open弹出窗口的位置问题
2014/03/18 Javascript
使用javascript获取页面名称
2014/12/23 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
2015/02/26 Javascript
jquery实现标签上移、下移、置顶
2015/04/26 Javascript
jQuery组件easyui对话框实现代码
2016/08/25 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
2016/11/17 Javascript
分享十三个最佳JavaScript数据网格库
2017/04/07 Javascript
关于foreach循环中遇到的问题小结
2017/05/08 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
2018/05/10 Javascript
深入理解Antd-Select组件的用法
2020/02/25 Javascript
JS实现购物车基本功能
2020/11/08 Javascript
利用python实现命令行有道词典的方法示例
2017/01/31 Python
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
python变量命名的7条建议
2019/07/04 Python
selenium学习教程之定位以及切换frame(iframe)
2021/01/04 Python
Python中Pyspider爬虫框架的基本使用详解
2021/01/27 Python
html5 标签
2009/07/16 HTML / CSS
html5 video标签屏蔽右键视频另存为的js代码
2013/11/12 HTML / CSS
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
2016/01/20 HTML / CSS
整理HTML5移动端开发的常用触摸事件
2016/04/15 HTML / CSS
美国帽子俱乐部商店:Hat Club
2019/07/05 全球购物
EJB发布WEB服务一般步骤
2012/10/31 面试题
四好少年事迹材料
2014/01/12 职场文书
历史学专业求职信
2014/06/19 职场文书
学习计划书怎么写
2014/09/15 职场文书
税务干部群众路线教育实践活动自我剖析材料
2014/09/21 职场文书
2014年党支部书记工作总结
2014/12/04 职场文书
运动会致辞稿
2015/07/29 职场文书
java objectUtils 使用可能会出现的问题
2022/02/28 Java/Android
Nginx设置HTTPS的方法步骤 443证书配置方法
2022/03/21 Servers