jQuery Tools Validatorフォーム検証プラグインツールの使い方の詳細

6001 ワード

Webページではフォーム検証機能が常に必要であり、従来はフォームフィールドを検証するために大量のコードを書く必要があったが、jQuery Toolsは便利なフォーム検証ツールを提供し、熟知してから多くの開発時間を節約することができる.
一、validator基本使用方法
jQuery Tools validatorプラグインはinput要素にいくつかのタイプを追加しました:email、number、url、自動的に電子メールフォーマット、整数フォーマット、URLフォーマットに従ってinput入力ボックスを検証します.同時にmax、min、pattern、required属性もサポートします.これらはHTML 5標準の属性とタイプで、ブラウザがHTML 5をサポートしなくてもjQuery tools validatorは自動的に認識します.
例:単純検証ルールの定義


$("input[name='email']").validator();

二、validator配置パラメータの詳細
ツールバーの
デフォルト
説明
effect
'default'
エラーメッセージ表示効果
errorClass
'invalid'
検証に失敗した場合、フォーム要素に目立つスタイルを追加します.
errorInputEvent
'keyup'
検証にエラーがある場合(エラー状態)、単一の検証をトリガーするイベント名、change、blur、nullを使用することもできます.
formEvent
'submit'
フォーム全体の検証タイミングは、すべての項目を一度検証します.
grouped
false
複数のエラーをマージ表示するかどうか.
inputEvent
null
通常の状態で単一の検証がトリガーされるイベント名は、errorInputEventよりも優先されます.つまり、エラーが発生した場合は、errorInputEventを優先的に実行して無視し、change、blur、nullを使用することもできます.
lang
'en'
エラーメッセージ言語
message
'

エラーメッセージの外部要素
messageAttr
'data-message'
フォーム要素にこの属性が追加された場合、エラーが発生したときにこの属性の値が表示されます.
messageClass
'error'
エラーメッセージのCSSスタイル
offset
[0, 0]
エラーメッセージ表示位置のオフセット量
position
'center right'
エラーメッセージの表示場所、デフォルトはフォーム要素の右側、上下中央
singleError
false
毎回1つのエラーメッセージのみを表示するかどうか
speed
'normal
エラーメッセージのグラデーション速度
例:validatorを初期化し、構成パラメータを入力します.


$("form.vali").validator({
    messageClass:"yellow",
    position:"bottom left",
    errorClass:"errorClass"
});

三、デフォルトエラープロンプトの定義


$.tools.validator.localize("cn", {
  ':email'  		: '         ',
  ':number' 		: '     ',
  '[max]'	 		: '      $1   ',
  '[min]'	 		: '     $1   ',
  '[required]' 	    : '       ！'
  });
$("#myForm").validator({lang: 'cn'});

以上のコードは、「cn」という一連の言語名のデフォルトエラープロンプト情報を定義しています.複数の言語バージョンを個別のフィールドに設定する必要がある場合は、次の方法を使用します.


$.tools.validator.localizeFn("[type=time]", {
  en: 'Please supply a valid time',
  cn: '          '
});

四、カスタム検証規則


//    
$.tools.validator.fn("[type=time]", function(el, value) {
  return /\d\d:\d\d/.test(value) ? true : "       ";
});
//    
$.tools.validator.fn(
    "[type=range]",
    "      $1   $2     ",
    function(el, v) {
        //   min   max    
        var min = el.attr("min"), max = el.attr("max"), value = parseFloat(v);
        //         true，        ，             
        return  value >= min && value <  max  true  min maxbr>    }
);
//    2
$.tools.validator.fn(
  //                   ，       true
  function() {
    return $(this).parents("form.register").length > 0;
  //           
  }, function(el, v) {
    //          true
    return true;
  }
);

//    3

//       
function myMatcher() {
  return $(this).parents("form.register").length > 0;
}
 
//     
myMatcher.key = "register-input";
 
//          
$.tools.validator.fn(myMatcher, "       ", function(el, v) {
  //       true
  return true;
});

五、サービス側リモートajax検証の使用


//     validator                
$("#myform").validator({ position: 'center right' }).submit(function(e) {

  var form = $(this);
 
  //                    
  if (!e.isDefaultPrevented()) {
 
  //   AJAX      ，      post         
  $.getJSON(form.attr("action") + "?" + form.serialize(), function(json) {
      //          true
      if (json === true)  {
        form.load("success.php");//           
      } else {
        //       .    invalidate()       
        form.data("validator").invalidate(json);
      }
  });
 
  //           ，           
  e.preventDefault();
  }
});

リモートAJAXでエラーメッセージを返す場合はJSON形式を使用する必要があります.


{
  "zip": "You must live in northern Finland in order to proceed",
  "total": "You gave us too much money! Please check"
}

六、カスタム効果でエラー情報を表示/非表示にする


//      wall   
$.tools.validator.addEffect("wall",
  function(errors, event) {
  
    //     
    $.each(errors, function(index, error) {
    
    //       
    var input = error.input;
    
    //       
    var errors = error.messages;
    
    //                  
    });
 
  }, function(inputs)  {
    //     ，        
  }
);

七、ValidatorのAPIメソッド呼び出し
方法
戻り値のタイプ
説明
checkValidity()
boolean
フォーム検証の即時実行
destroy()
API
validatorインスタンスを破棄します.
getConf()
Object
現在のvalidatorインスタンスのパラメータ構成を返します.
getForm()
jQuery
フォーム・オブジェクトに戻る
getInputs()
jQuery
すべてのinputオブジェクトを返します
invalidate(Object)
API
エラーメッセージを強制表示します.パラメータはJSON形式です.主にサービス側からリモート検証のエラーを受信表示するために用いる.
reflow()
API
エラー情報は絶対位置で表示されるため、エラー情報の表示位置を修正します.フォームの位置が変更されると、エラー情報の表示位置が正しくない場合があります.この関数を呼び出して修正します.
reset(jQuery)
API
「検証エラー」をリセットし、パラメータが空の場合、すべてのフィールドをリセットします.フォームにresetボタンがある場合は、この機能が自動的に追加されます.
使用方法:


$('#myform').data("validator").checkValidity();

現在のjqueryからジャンプする方法each()関数ループ

flask-sqlalchemyにおけるbackref lazyのパラメータインスタンスの解釈と選択