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

前端技术 2023/09/02 JavaScript

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.phpstudy.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校验规则更加了解。

本文地址：https://www.stayed.cn/item/4041

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案