5

ページに jQuery Validation プラグインがあります。誰かが電話番号をフォーム フィールドに入力したときに、バリデーターに特定の形式のみを認識させたい:

###-###-####

JavaScriptでこれを見ます：

phone_number: {
    required: true,
    number: true 
},

電話番号に必要な形式を指定するために何かを追加できますか? jQuery Mask pluginを追加することについて何かを見つけましたが、それを避けることができれば、ページの重みを増やしたくありません。(さらに...確かに、特定の形式のみを検証する何らかの方法が存在する必要があります。)

4

4 に答える 4

15

@Sparky の提案は、少し柔軟性がある場合に適していますが、その形式だけが必要な場合に備えて、カスタム ルールを追加できます。

$.validator.addMethod('customphone', function (value, element) {
    return this.optional(element) || /^\d{3}-\d{3}-\d{4}$/.test(value);
}, "Please enter a valid phone number");

$(document).ready(function () {
    $("#myform").validate({
        rules: {
            field1: 'customphone'
        }
    });
});

例: http://jsfiddle.net/kqczf/16/

これを簡単にカスタム クラス ルールにすることができます。このようにして、ルールを設定したい各入力にクラスを追加するだけで、validate呼び出しからルール オブジェクトを省略することができます。

$(document).ready(function () {
    $("#myform").validate();
});

<input type="text" name="field1" id="field1" class="required customphone" />

例: http://jsfiddle.net/kqczf/17/

于 2013-03-18T17:05:38.577 に答える
6

jQuery Validate プラグインのファイルphoneUSに含まれているルールを使用するだけです。additional-methods.js

デモ: http://jsfiddle.net/c9zy9/

$(document).ready(function () {

    $('#myform').validate({ // initialize the plugin
        rules: {
            phone_number: {
                required: true,
                phoneUS: true
            }
        }
    });

});

または、ファイル全体を含める代わりにadditional-methods.js、メソッドだけを引き出すこともできますphoneUS。

デモ: http://jsfiddle.net/dSz5j/

$(document).ready(function () {

    jQuery.validator.addMethod("phoneUS", function (phone_number, element) {
        phone_number = phone_number.replace(/\s+/g, "");
        return this.optional(element) || phone_number.length > 9 && phone_number.match(/^(\+?1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/);
    }, "Please specify a valid phone number");

    $('#myform').validate({ // initialize the plugin
        rules: {
            phone_number: {
                required: true,
                phoneUS: true
            }
        }
    });

});
于 2013-03-18T17:03:23.123 に答える
2

jQuery Masked Input Pluginを確認してください。次のようなもので入力をマスクできます。

$("#phone_number").mask("999-999-9999");
于 2013-03-18T17:02:09.923 に答える
0

これを試してみてください。要件に応じてうまく機能します

jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
});
$( "#myform" ).validate({
  rules: {
    field: {
      required: true,
      phoneUS: true
    }
  }
});
于 2014-01-20T09:38:41.827 に答える