web-dev-qa-db-ja.com

jQuery Validationを使用して正確な長さを確認するにはどうすればよいですか？

jQuery Validation plugin を使用してフォームを検証する場合、文字列が正確にX文字であることをどのように確認しますか？

jqueryvalidationjquery-validate
25
Nathan Long

これには（現在）組み込みのメソッドがないため、独自のメソッドを追加する必要があります。これはうまくいくでしょう：

_jQuery.validator.addMethod("exactlength", function(value, element, param) {
 return this.optional(element) || value.length == param;
}, $.validator.format("Please enter exactly {0} characters."));
_

これは次のように使用できます：

_$("#formtovalidate").validate({
  rules: {
    somefield: {
      exactlength: 10
    }
   });
_

アップデート-仕組み

これがどのように機能するか尋ねられました。詳細はすべてわかりません。この方法は、既存の方法でモデル化しました。しかし、これはそれを説明する私の最善の試みです。

  • この関数は、value、element、およびparam。を受け取ります。
    • valueは、検証されるフィールドに入力された値です
    • elementはフィールド自体です
    • paramは、ルールタイプとコロンの後に続くものです。上記の例では、_exactlength: 10_の10です。
  • 次の行はreturnステートメントです。これにより、検証メソッドの最終的な判定が、それを呼び出したコードに戻ります。 trueを返す検証メソッドは、「このフィールドは検証に合格しました！」ある行の値を返します。
  • returnの後には、 'or'演算子（_||_）で区切られた2つの宣言が続きます。
    • _||_演算子は、「この左側の項目を評価します。 trueの場合、trueを返します。そうでない場合は、右側のものを試してください。 trueの場合、trueを返します。それ以外の場合は、falseを返します。 '
      • 左側のアイテムはthis.optional(element)です。要素がルールで必要ない場合、これはtrueを返し、検証も戻ります。これは、「このフィールドが必須であると言わなければ、検証されるかどうかは気にしません。」
      • フィールドが必要な場合は、_||_の右側に移動します。これは実際の検証テストです。フィールドの入力の長さと、指定した長さを比較します。それらが同じ場合はtrueを返し、メソッドはtrueを返し、検証に合格します。そうでない場合、検証は失敗します。

それだけです。さらにヘルプが必要な場合は、 ドキュメント 、特に カスタム検証メソッド に関する部分を参照してください。

52
Nathan Long

例：

rules : {
"someFieldName":{digits:true,minlength:20,maxlength:20}
}
19
Igor

次のような動的メッセージを提供することで、既存のrangelengthメソッドが正確な範囲をサポートするようにすることもできます。

$.extend($.validator.messages, {
    rangelength: function(args, inputElement) {
        var isExactRange, min, max;

        // Cast arguments as numbers
        min = Number(args[0]);
        max = Number(args[1]);

        isExactRange = min === max;

        if (isExactRange) {
            return 'Please enter exactly ' + min + ' characters.';
        }


        return 'Please enter between ' + min + ' and ' + max + ' characters.';
    }
);

ご覧のように、検証メソッドに渡された引数に基づいて、その場でメッセージを生成できます。メッセージコールバックには、最初の引数として検証メソッドの引数が渡され、2番目の引数として検証される入力要素が渡されます。

これにより、正確な範囲が指定されている場合は1つのメッセージを返し、上限と下限が同じでない場合は別のメッセージを返すことができます。

デフォルトのrangelengthメッセージにフォールバックするには、

'Please enter between ' + min + ' and ' + max + ' characters.'

と

$.validator.messages.rangelength

ナビゲートするのが難しく、プラグインのすべての機能を説明しているわけではないので、公式ドキュメントが更新されるといいですね。

3
Lars Gyrup Brink Nielsen

最も簡単な方法は、データ属性を介して既存の検証メソッドを使用し、明確にするために独自の検証メッセージを設定することです。

<input data-rule-minlength="8" data-rule-maxlength="8" data-msg-minlength="Exactly 8 characters please" data-msg-maxlength="Exactly 8 characters please">
3
Ted Avery