简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
ホームページ
記事
に質問
コース
特集
ダウンロード
ゲーム
辞書
最近の更新

ホームページ  >  記事  >  ウェブフロントエンド  >  jQuery プラグイン EasyUI 検証ルール validatebox 検証 box_jquery

jQuery プラグイン EasyUI 検証ルール validatebox 検証 box_jquery

WBOY
WBOYオリジナル
2016-05-16 15:29:091975ブラウズ

Web フロントエンド データ検証コンポーネント

Web プロジェクトにおけるクライアントとサーバー間の対話は、フォーム フォームから切り離すことができません。フォーム フォームで最も一般的に使用される要素は、input タグに最初に使用する必要があります。箱！

入力テキストボックスはユーザーが任意に入力できるものであり、規定を満たしていないデータを入力してしまうことは避けられません。サーバーに送信して検証すると、ユーザー エクスペリエンスが大幅に低下します。

フロントエンド検証用の既製のコンポーネントは数多くありますが、その中で便利なものの 1 つは、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 のソース ファイルには追加しないことが最善です。1 つ目は、誤操作による EasyUi ソース コードの汚染を避けるためです。さらに重要なのは、将来のコンポーネントのアップグレードが簡単になることです。 。したがって、最も合理的な方法は、独自の拡張ファイルを別途作成することです。

例: 元のルールに基づいて、別のファイル easyui-extend-rcm.js に次の 3 つのチェックを追加しました。

(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);

カスタムルールの使用方法
EasyUI ファイルの導入に加えて、EasyUI ファイルの後の順序で独自の拡張ファイルも導入する必要があります。
353aeaeb304f2c117f8f343d84e199cc5d922835f04e91b1cf1e9cad217a2ea6