jQuery 플러그인 EasyUI 유효성 검사 규칙 verifybox 유효성 검사 box_jquery

웹 프론트엔드 데이터 검증 구성요소

웹 프로젝트에서 클라이언트와 서버 간의 상호 작용은 Form 폼과 분리될 수 없습니다. Form 폼에서 가장 일반적으로 사용되는 요소는 입력 태그에 가장 먼저 사용해야 하는 텍스트입니다. 상자!

입력 텍스트 상자에서는 사용자가 임의로 입력할 수 있습니다. 이때 규정에 맞지 않는 일부 데이터를 입력할 수 있으므로 데이터를 제출하기 전에 확인이 필요합니다. 서버에 제출한 후 확인하면 사용자 경험이 크게 저하됩니다.

프런트 엔드 검증을 위해 미리 만들어진 구성 요소가 많이 있습니다. 가장 유용한 것 중 하나는 EasyUI의 verifybox 플러그인입니다. 프롬프트 인터페이스는 매우 친숙하지만 기본적으로 verifybox에서 제공하는 검증 규칙은 상대적으로 제한적입니다. 자체 유효성 검사 규칙을 추가해야 합니다.

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 파일 순서대로 자신의 확장 파일도 도입해야 합니다.

<span style="font-size:18px;"><script src="#WEBROOT</p>
<div class="jb51code">
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">
()/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>

然后在Html中如下引用即可，一定要加Class 和 data-options两个属性：

<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>

数据校验显示效果

效果如下图所以：

로그인 후 복사