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 自定义函数缺省值的设置方法
May 05 Javascript
JQuery中的ready函数冲突的解决方法
May 17 Javascript
jquery 操作日期、星期、元素的追加的实现代码
Feb 07 Javascript
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
Oct 11 Javascript
图片img的src不变让浏览器重新加载实现方法
Mar 29 Javascript
node.js中实现同步操作的3种实现方法
Dec 05 Javascript
php+ajax+jquery实现点击加载更多内容
May 03 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
Nov 18 Javascript
angularjs实现table增加tr的方法
Feb 27 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
Nov 08 Javascript
javascript利用canvas实现鼠标拖拽功能
Jul 23 Javascript
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
实例解析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
ThinkPHP控制器详解
2015/07/27 PHP
Laravel学习笔记之Artisan命令生成自定义模板的方法
2018/11/22 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
jquery validate使用攻略 第四步
2010/07/01 Javascript
基于jquery的关于动态创建DOM元素的问题
2010/12/24 Javascript
jquery 笔记 事件
2011/11/02 Javascript
javascript 获取图片尺寸及放大图片
2013/09/04 Javascript
js获取select选中的option的text示例代码
2013/12/19 Javascript
jquery实现漂亮的二级下拉菜单代码
2015/08/26 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
2016/10/10 Javascript
JavaScript字符串对象(string)基本用法示例
2017/01/18 Javascript
JQuery实现图片轮播效果
2017/05/08 jQuery
nodejs搭建本地服务器并访问文件操作示例
2019/05/11 NodeJs
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
2019/07/04 Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
2020/05/23 Javascript
js实现贪吃蛇游戏 canvas绘制地图
2020/09/09 Javascript
[01:12:44]VG vs Mineski Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
Python标准库os.path包、glob包使用实例
2014/11/25 Python
Python类的用法实例浅析
2015/05/27 Python
python利用装饰器进行运算的实例分析
2015/08/04 Python
Python中json格式数据的编码与解码方法详解
2016/07/01 Python
python使用fcntl模块实现程序加锁功能示例
2017/06/23 Python
详谈Python3 操作系统与路径 模块(os / os.path / pathlib)
2018/04/26 Python
python实现电脑自动关机
2018/06/20 Python
使用python实现男神女神颜值打分系统(推荐)
2019/10/31 Python
Django框架HttpRequest对象用法实例分析
2019/11/01 Python
Python实现一个简单的毕业生信息管理系统的示例代码
2020/06/08 Python
Django中ORM的基本使用教程
2020/12/22 Python
澳大利亚领先的睡衣品牌:Peter Alexander
2016/08/16 全球购物
Groupon比利时官方网站:特卖和网上购物高达-70%
2019/08/09 全球购物
京剧自荐信
2014/01/26 职场文书
女子职高个人自荐书
2014/02/01 职场文书
2014年师德师风学习材料
2014/05/16 职场文书
学术诚信承诺书
2014/05/26 职场文书
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers
Spring Boot 使用 Spring-Retry 进行重试框架
2022/04/24 Java/Android