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脚本类
Aug 27 Javascript
javascript setTimeout和setInterval 的区别
Dec 08 Javascript
Javascript中引用示例介绍
Feb 21 Javascript
Jquery对数组的操作技巧整理
Mar 25 Javascript
浅析jQuery中使用$所引发的问题
May 29 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
Jun 16 Javascript
JavaScript toUpperCase()方法使用详解
Aug 26 Javascript
手机端转换rem适应
Apr 01 Javascript
vuex的简单使用教程
Feb 02 Javascript
Vue项目中如何引入icon图标
Mar 28 Javascript
Vue中对拿到的数据进行A-Z排序的实例
Sep 25 Javascript
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 Vue.js
实例解析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
一个简单实现多条件查询的例子
2006/10/09 PHP
基于php设计模式中工厂模式详细介绍
2013/05/15 PHP
解析PHP对现有搜索引擎的调用
2013/06/25 PHP
php解析http获取的json字符串变量总是空白null
2015/03/02 PHP
php实现多维数组排序的方法示例
2017/03/23 PHP
PHP项目多语言配置平台实现过程解析
2020/05/18 PHP
jQuery 性能优化手册 推荐
2010/02/23 Javascript
JS遮罩层效果 兼容ie firefox jQuery遮罩层
2010/07/26 Javascript
5分钟理解JavaScript中this用法分享
2013/11/09 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
2014/02/11 Javascript
使用javascript实现雪花飘落的效果
2015/01/13 Javascript
JavaScript中Date对象的常用方法示例
2015/10/24 Javascript
使用javaScript动态加载Js文件和Css文件
2015/10/24 Javascript
深入解析JavaScript编程中的this关键字使用
2015/11/09 Javascript
js省市县三级联动效果实例
2020/04/15 Javascript
Node.js用readline模块实现输入输出
2016/12/16 Javascript
webpack入门必知必会
2017/01/16 Javascript
js仿微博动态栏功能
2017/02/22 Javascript
Vue中引入样式文件的方法
2017/08/18 Javascript
js禁止浏览器页面后退功能的实例(推荐)
2017/09/01 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
2018/01/26 Javascript
layui实现三级联动效果
2019/07/26 Javascript
vue 实现滚动到底部翻页效果(pc端)
2019/07/31 Javascript
Vue实现购物车实例代码两则
2020/05/30 Javascript
详解Python函数可变参数定义及其参数传递方式
2017/08/02 Python
详解Python3 中hasattr()、getattr()、setattr()、delattr()函数及示例代码数
2018/04/18 Python
朴素贝叶斯分类算法原理与Python实现与使用方法案例
2018/06/26 Python
Python如何使用队列方式实现多线程爬虫
2020/05/12 Python
Python使用socketServer包搭建简易服务器过程详解
2020/06/12 Python
蒂芙尼澳大利亚官方网站:Tiffany&Co. Australia
2017/08/27 全球购物
男女朋友协议书
2014/04/23 职场文书
大学生联谊活动策划书(光棍节)
2014/10/10 职场文书
幼师自荐信范文
2015/03/06 职场文书
《攀登者》:“海拔8000米以上,你不能指望任何人”
2019/11/25 职场文书
《仙剑客栈2》第一弹正式宣传片公开 年内发售
2022/04/07 其他游戏
MySql数据库 查询时间序列间隔
2022/05/11 MySQL