Rumah >hujung hadapan web >tutorial js >Peraturan pengesahan EasyUI pemalam jQuery validatebox validation box_jquery

Peraturan pengesahan EasyUI pemalam jQuery validatebox validation box_jquery

WBOYasal: 2016-05-16 15:29:092016semak imbas

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 ...&#63;$/i.test(value);
  },
  message: 'Please enter a valid email address.'
  },
  url: {
  validator: function(value){
   return ...&#63;$/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 /^[+|-]&#63;([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:
353aeaeb304f2c117f8f343d84e199cc5d922835f04e91b1cf1e9cad217a2ea6