18

フォームの検証にjQuery Validation プラグインを使用しています。

米国の郵便番号形式に従って郵便番号を検証したい:-

> 12345
> 12345-6789
> 12345 6789

私の現在のコードによると、郵便番号の検証は最大5で、すべて数値でなければなりません。

以下のコードを参照してください。

    <script src="~/Scripts/js/jquery.validate.js"></script>

<script>

    $().ready(function () {

        // validate signup form on keyup and submit
        $("#locationSetup").validate({
            rules: {
                'Address.AddressStreet': "required",
                'Address.City': "required",
                'Address.State.Country.CountryIsoCode': "required",
                'Address.State.SubnationalIsoCode': "required",
                'Address.PostalCode': {
                    required: true,
                    minlength: 5,
                    maxlength: 5,
                    digits: true
                }
            },
            messages: {
                'Address.AddressStreet': "Please enter your Street Address!",
                'Address.City': "Please select your City!",
                'Address.State.Country.CountryIsoCode': "Please  select your Country!",
                'Address.State.SubnationalIsoCode': "Please  select your State!",
                'Address.PostalCode': {
                    required: "Please enter your Postal Code!",
                    minlength: "Your Postal Code must be 5 numbers!",
                    maxlength: "Your Postal Code must be 5 numbers!",
                    digits: "Your Postal Code must be 5 numbers!"
                }
            }
        });

    });
</script>

@using (Html.BeginForm(Model.Step.ToString(), "Provision", FormMethod.Post, new Dictionary<string, object> { { "id", "locationSetup" } }))

<table width="100%" id="locInfo">
            <colgroup>
                <col width="30%" />
                <col />
            </colgroup>
            <tr>
                <th><label>@AddressResource.COUNTRY_LABEL_TEXT:</label> <span class="redtext">(Required)</span></th>
                <td>
                   @* @Html.HiddenFor(m => m.Address.State.Country.CountryIsoCode)*@
                   @Html.DropDownListFor(m => m.Address.State.Country.CountryIsoCode, ProvisioningHubProxy.GetCountriesList(),
                                htmlAttributes: new { @id = "Countries", @name = "Countries" })
                </td>
            </tr>
            <tr>
                <th> <label>@AddressResource.STATES_LABEL_TEXT:</label><span class="redtext">(Required)</span></th>
                <td> @Html.DropDownListFor(m => m.Address.State.SubnationalIsoCode, ProvisioningHubProxy.GetStatesList(),
                                htmlAttributes: new { @id = "States", @name = "States" })</td>
            </tr>
            <tr>
                <th><label>@AddressResource.CITY_LABEL_LABEL_TEXT:</label><span class="redtext">(Required)</span></th>
                <td> @Html.TextBoxFor(m => m.Address.City, htmlAttributes: new { @name = "City", @id = "City" })</td>
            </tr>
            <tr>
                <th> <label>@AddressResource.STREET_NAME_LABEL_TEXT:</label><span class="redtext">(Required)</span></th>
                <td>@Html.TextBoxFor(m => m.Address.AddressStreet, htmlAttributes: new { @name = "StreetName", @id = "StreetName" })</td>
            </tr>
            <tr>
                <th><label>@AddressResource.US_POSTAL_CODE_LABEL_TEXT:</label><span class="redtext">(Required)</span></th>
                <td>@Html.TextBoxFor(m => m.Address.PostalCode, htmlAttributes: new { @name = "ZipCode", @id = "ZipCode", @required = "required" })</td>
            </tr>
        </table>

}

提案してください。

4

4 に答える 4

31

カスタム バリデータを追加します。

jQuery.validator.addMethod("zipcode", function(value, element) {
  return this.optional(element) || /^\d{5}(?:-\d{4})?$/.test(value);
}, "Please provide a valid zipcode.");

_郵便番号の間にスペース1を受け入れたい場合/^\d{5}(?:[\s-]\d{4})?$/は、代わりにパターンに使用してください。

次に、オプションで指定します。

rules: {
  ...
  'Address.PostalCode': {
    ...
    zipcode: true,
    ...
  },
  ...
}

拡張ライブラリadditional-methods.jsにもzipcodeUSバリデータがあることに注意してください (ただし、他のものを使用していない限り、バリデータを含める意味がない場合があります)。

1仕様によると、適切にフォーマットされた郵便番号は、5 つの数字または 5 つの数字の後にハイフン (-) と 4 つの追加の数字で構成されます。スペースは技術的には受け入れられませんが、それでもパターンを提供します。

于 2013-09-25T18:09:00.383 に答える
16

ファイルをインクルードしadditional-methods.jszipcodeUSてルールを使用するだけです。

$("#locationSetup").validate({
    rules: {
        // rules,
        'Address.PostalCode': {
            required: true,
            zipcodeUS: true // <-- use it like this
        }
    },
....

ファイルを含めたくない場合はadditional-methods.js、次のメソッドをコードにコピーできます...

jQuery.validator.addMethod("zipcodeUS", function(value, element) {
    return this.optional(element) || /\d{5}-\d{4}$|^\d{5}$/.test(value)
}, "The specified US ZIP Code is invalid");
于 2013-09-25T22:09:04.957 に答える
1

郵便番号の検証ルーチンは additional-methods.js で提供されていますが、米国以外の国のフォームを無効にする場合、なぜ国情報を要求するのでしょうか? 世界の人口の約 5% だけが米国の郵便番号を使用していることを覚えておいてください。ユーザーが実際に選択した国に応じて、郵便番号検証ルーチンを作成することをお勧めします。

于 2013-11-16T16:56:47.323 に答える