Peraturan pengesahan EasyUI pemalam jQuery validatebox validation box_jquery

Komponen pengesahan data bahagian hadapan web

Interaksi antara klien dan pelayan dalam projek web tidak dapat dipisahkan daripada borang Borang Elemen yang paling biasa digunakan dalam borang Borang ialah teg input Perkara pertama yang digunakan untuk teg input mestilah teks teks kotak!

Kotak teks input membolehkan pengguna memasukkan secara sewenang-wenangnya. Tidak dapat dielakkan bahawa pengguna akan memasukkan beberapa data yang tidak memenuhi peraturan Pada masa ini, adalah perlu untuk mengesahkan data sebelum menyerahkannya diserahkan kepada pelayan dan kemudian mengesahkannya, Ia akan mengurangkan pengalaman pengguna.

Terdapat banyak komponen sedia untuk pengesahan bahagian hadapan kita perlu menambah peraturan pengesahan kita sendiri.

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.'
  }
 },

Peraturan pengesahan tersuai

Apabila menambahkan peraturan pengesahan baharu, sebaiknya jangan lakukannya dalam fail sumber EasyUI Yang pertama adalah untuk mengelakkan pencemaran kod sumber EasyUi akibat salah operasi, dan yang lebih penting, mudah untuk menaik taraf komponen pada masa hadapan. . Jadi cara yang paling munasabah ialah menulis fail pengembangan anda sendiri secara berasingan.

Sebagai contoh: Saya menambah tiga semakan berikut berdasarkan peraturan asal, dalam fail yang berasingan 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);

Cara menggunakan peraturan tersuai
Selain memperkenalkan fail EasyUI, anda juga mesti memperkenalkan fail sambungan anda sendiri, mengikut urutan selepas fail 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>

数据校验显示效果

效果如下图所以：

Salin selepas log masuk