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

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:="" www.jb51.net="" 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校验规则更加了解。

(0)

相关推荐

  • easyui关于validatebox实现多重规则验证的方法(必看)

    方法一: 自从1.3.2版本开始,validatebox自身已经支持多重校验了,例如: <input class="easyui-validatebox" data-options="required:true,validType:['email','length[0,20]']"> 方法二:(不太好用,试了半天还是不显示第二个验证的消息) 对于1.5版本的easyui.min,注释掉以下代码: 然后再添加 $.extend($.fn.validateb

  • easyui validatebox验证

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="easyui1.2.4/jquery-1.6.min.js" type="text/javascript"></script> <script src="easyui1.2.4/jquery.easyui.min.js" type="te

  • jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法

    先给大家分享数据校验显示效果 Web前端数据校验组件 Web项目中客户端与服务端的交互离不开Form表单,Form表单中最常用的元素莫过于input标签,input标签首先要用的肯定是text文本框啦! input文本框允许用户任意输入,难免会会有用户输入一些不符合规定的数据,此时,在提交之前对数据校验是很有必要的,如果等到提交到服务端再校验就会大大降低用户体验啦. 前端校验有很多现成的组件,比较好用的有 EasyUI 的 validatebox 插件,提示界面做的相当友好,只是validate

  • jQuery EasyUI之验证框validatebox实例详解

    1.样式 validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效.如果用户输入了无效的值,它将会更改输入框的背景颜色,并且显示警告图标和提示信息.该验证框可以结合form(表单)插件并防止表单重复提交. 2.练习1:验证输入字符长度及非空 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>validatebox</title>

  • jquery easyui validatebox remote的使用详解

    validatebox 的validateType可以是一下3个格式: 1字符串 2数组,应用多个验证 3对象,每个key是一个验证名称value是验证的数组参数 下面是代码示例 <input class="easyui-validatebox" data-options="required:true,validType:'url'"> <input class="easyui-validatebox" data-options

  • Jquery Easyui验证组件ValidateBox使用详解(20)

    本文实例为大家分享了Jquery Easyui验证组件的实现代码,供大家参考,具体内容如下 加载方式 Class加载 <input id="email" class="easyui-validatebox" data-options="required:true,validType:'email'" /> JS调用加载 <input id="email" /> <script> $(func

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

    Web前端数据校验组件 Web项目中客户端与服务端的交互离不开Form表单,Form表单中最常用的元素莫过于input标签,input标签首先要用的肯定是text文本框啦! input文本框允许用户任意输入,难免会会有用户输入一些不符合规定的数据,此时,在提交之前对数据校验是很有必要的,如果等到提交到服务端再校验就会大大降低用户体验啦. 前端校验有很多现成的组件,比较好用的有 EasyUI 的 validatebox 插件,提示界面做的相当友好,只是validatebox 默认提供的校验规则比较

  • jQuery设置Easyui校验规则(推荐)

    废话不多说了,直接给大家贴代码了.具体代码如下所示: //JQuery EasyUI 动态改变表单项的验证规则 $(document).ready(function(){ $('#FILE_QUALITY').combobox({ onChange:function(newValue,oldValue){ if(newValue == 2){ $('#FRONT_FOR_UNIT').validatebox({ required: false }); } else if(newValue ==

  • Jquery插件easyUi实现表单验证示例

    要实现的功能:在做添加学生信息的时候,利用easyui的验证功能判断 学号是否重复和学号只能为数字 最终效果如下图: 但在做这个的过程中,遇到了一系列的问题: 扩展validatebox的验证方法,最开始的验证代码如下: //学号格式只能为数字 ****//这里没有问题**** number: {//value值为文本框中的值 validator: function (value) { var reg = /^[0-9]*$/; return reg.test(value); }, messag

  • 轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)

    一.EasyUI创建基础树形网格 树形网格(TreeGrid)组件从数据网格(DataGrid)继承,但是允许在行之间存在父/子节点关系.许多属性继承至数据网格(DataGrid),可以用在树形网格(TreeGrid)中.为了使用树形网格(TreeGrid),用户必须定义 'treeField' 属性,指明哪个字段作为树节点. 本文将向您展示如何使用树形网格(TreeGrid)组件设置一个文件夹浏览. 创建树形网格(TreeGrid) <table id="test" title

  • jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法

    本文实例讲述了jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法.分享给大家供大家参考,具体如下: 我们在使用EasyUI Tabs框架时,在框架最顶层的弹出窗体中需要操作当前Tab的iframe窗体内容或方法,这时候我们就可以使用以下方法来实现. 具体实现代码如下所示: function getTabWindow() { var curTabWin = null; var curTab = parent.$('#main-center').tabs('getSelected

  • 轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)

    一.EasyUI树形网格动态加载 动态加载树形网格有助于从服务器上加载部分的行数据,避免加载大型数据的长时间等待.本教程将向您展示如何创建带有动态加载特性的树形网格(TreeGrid). 创建树形网格(TreeGrid) <table title="Products" class="easyui-treegrid" style="width:700px;height:300px" url="treegrid3_getdata.ph

  • jQuery插件easyUI实现通过JS显示Dialog的方法

    本文实例分析了jQuery插件easyUI实现通过JS显示Dialog的方法.分享给大家供大家参考.具体如下: <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <title></title> <script src="jquery-easyui-1.3.4/jquery-1.8.0.min.js" type=&quo

  • jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)

    本文实例讲述了jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果.分享给大家供大家参考,具体如下: function openTopWindow(url, title, width, height) { title = title == undefined ? ' ' : title; width = width == undefined ? 800 : width; height = height == undefined ? 300 : height; if (url

  • jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法

    本文实例讲述了jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法.分享给大家供大家参考,具体如下: 方法很简单,我们只需要在数据加载成功后的事件中处理即可.具体代码如下所示: //事件 onLoadSuccess: function (data) { //模拟测试加载成功后数据Id大于20的都勾选中,并禁用checkbox for (var i = 0; i < data.rows.length; i++) { if (data.rows[i].Id > 20)

  • jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法

    本文实例讲述了jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法.分享给大家供大家参考,具体如下: 一.问题描述: $('#tb-page-list').datagrid({ url: '/BisOrderInfo/GetList', pageNumber: 2, pageSize: 10 }); 当手动设置 pageNumber大于或等于2时,查看请求的方法时,会请求2次,并且第二次的pageNumber等于1: 二.原因所在: jquery.ea

随机推荐