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 相关文章推荐
一个JavaScript继承的实现
Oct 24 Javascript
JavaScript中this关键字使用方法详解
Mar 08 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
May 03 Javascript
让低版本浏览器支持input的placeholder属性(js方法)
Apr 03 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
Mar 30 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
Jun 10 Javascript
JavaScript实现经典排序算法之插入排序
Dec 28 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
Mar 08 Javascript
JavaScript+CSS相册特效实例代码
Sep 07 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
Sep 07 Javascript
Redux实现组合计数器的示例代码
Jul 04 Javascript
JavaScript遍历数组和对象的元素简单操作示例
Jul 09 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 中的一些经验积累
2006/10/09 PHP
PHP+jQuery实现自动补全功能源码
2013/05/15 PHP
浅析get与post的一些特殊情况
2014/07/28 PHP
Laravel 5框架学习之环境与配置
2015/04/08 PHP
PHP图像裁剪缩略裁切类源码及使用方法
2016/01/07 PHP
Ajax一统天下之Dojo整合篇
2007/03/24 Javascript
js实时获取系统当前时间实例代码
2013/06/28 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
2013/12/24 Javascript
悬浮数字的实现案例
2014/02/19 Javascript
js 动态修改css文件用到了cssRule
2014/08/20 Javascript
在Python中使用glob模块查找文件路径的方法
2015/06/17 Javascript
JavaScript实现的伸展收缩型菜单代码
2015/10/14 Javascript
jQuery模拟select实现下拉菜单功能
2016/06/20 Javascript
JavaScript实现刷新不重记的倒计时
2016/08/10 Javascript
动态加载css方法实现和深入解析
2017/01/18 Javascript
jquery操作ul的一些操作笔记整理(干货)
2017/08/31 jQuery
使用Vue 实现滑动验证码功能
2019/06/27 Javascript
js实现贪吃蛇游戏 canvas绘制地图
2020/09/09 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
2020/10/24 Javascript
Javascript实现单选框效果
2020/12/09 Javascript
Python优化技巧之利用ctypes提高执行速度
2016/09/11 Python
python中os和sys模块的区别与常用方法总结
2017/11/14 Python
基于python3 OpenCV3实现静态图片人脸识别
2018/05/25 Python
Python实现分段线性插值
2018/12/17 Python
pandas的相关系数与协方差实例
2019/12/27 Python
TFRecord文件查看包含的所有Features代码
2020/02/17 Python
Python基于Socket实现简单聊天室
2020/02/17 Python
利用python中的matplotlib打印混淆矩阵实例
2020/06/16 Python
Python用来做Web开发的优势有哪些
2020/08/05 Python
Python第三方库安装缓慢的解决方法
2021/02/06 Python
GAP欧盟网上商店:GAP EU
2016/09/13 全球购物
HUGO BOSS美国官方网上商店:世界知名奢侈品牌
2017/08/04 全球购物
学雷锋演讲稿
2014/03/04 职场文书
家长会欢迎词
2015/01/23 职场文书
2015年幼儿园个人工作总结
2015/04/25 职场文书
中国合伙人观后感
2015/06/02 职场文书