Jak zweryfikować kod pocztowy USA za pomocą wtyczki walidacji jQuery

Question

Używam jQuery Validation plugin do sprawdzania poprawności mojego formularza.

Chcę sprawdzić poprawność kodu pocztowego według formatu US Kod pocztowy: -

> 12345 
> 12345-6789 
> 12345 6789 

Jak na moje curent kodu jego walidacji kod pocztowy powinien wynosić maksymalnie 5 i wszystko numeryczny.

proszę zobaczyć poniższy kod:

<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> 

}

Proszę zasugerować.

Answer 1

Dodaj własny walidator:

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

_If chcesz zaakceptować przestrzenie między kodu pocztowego, należy /^\d{5}(?:[\s-]\d{4})?$/ dla wzoru zamiast.

następnie podać go w opcjach:

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

Zauważ, że biblioteka rozszerzenie additional-methods.js ma zipcodeUS walidator jak również (ale jeśli używasz którykolwiek z nich nie może mieć sens, aby umieścić go).

---

Według specyfikacji, prawidłowo sformatowane kody suwak składa się z pięciu (5), liczb lub pięć (5) n popychacza myślnikiem (-) i cztery (4), dodatkowe cyfry. Przestrzeń nie powinna być technicznie akceptowalna, ale podam wzór niezależnie.

Answer 2

Można zdefiniować niestandardowy walidator:

jQuery.validator.addMethod('zipcode', function(value, element) { 
    return this.optional(element) || !!value.trim().match(/^\d{5}(?:[-\s]\d{4})?$/); 
}, 'Invalid zip code'); 

następnie używać go jak ten

<input class="zipcode"/> 

Answer 3

Wystarczy obejmują the additional-methods.js file i wykorzystywać regułę zipcodeUS.

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

Jeśli nie chcesz dołączyć plik additional-methods.js można skopiować następującą metodę w kodzie ...

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

Answer 4

procedur walidacji kod pocztowy jest dostarczenie dodatkowych-methods.js ale chciałbym zapytać, dlaczego pytasz o informacje o kraju, jeśli zamierzasz unieważnić formularz dla dowolnego kraju poza USA? Pamiętaj, że tylko około 5% populacji na świecie korzysta z kodu pocztowego w USA. Poleciłbym, abyś wprowadził procedury sprawdzania poprawności kodów pocztowych w zależności od kraju faktycznie wybranego przez użytkownika.