如何使用jQuery Validation插件validation美国邮政编码

我正在使用jQuery Validation插件来validation我的表单。

我想根据美国ZIPCode格式validation邮政编码： –

> 12345 > 12345-6789 > 12345 6789 

根据我的密码，它validation邮政编码应该是最大5和所有数字。

请参阅以下代码：

    $().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!" } } }); });  @using (Html.BeginForm(Model.Step.ToString(), "Provision", FormMethod.Post, new Dictionary { { "id", "locationSetup" } })) 
     
 
@AddressResource.COUNTRY_LABEL_TEXT: (Required)
 
 @* @Html.HiddenFor(m => m.Address.State.Country.CountryIsoCode)*@ @Html.DropDownListFor(m => m.Address.State.Country.CountryIsoCode, ProvisioningHubProxy.GetCountriesList(), htmlAttributes: new { @id = "Countries", @name = "Countries" }) 
 
 
 
 @AddressResource.STATES_LABEL_TEXT:(Required)
 
 @Html.DropDownListFor(m => m.Address.State.SubnationalIsoCode, ProvisioningHubProxy.GetStatesList(), htmlAttributes: new { @id = "States", @name = "States" })
 
 
 
@AddressResource.CITY_LABEL_LABEL_TEXT:(Required)
 
 @Html.TextBoxFor(m => m.Address.City, htmlAttributes: new { @name = "City", @id = "City" })
 
 
 
 @AddressResource.STREET_NAME_LABEL_TEXT:(Required)
 
@Html.TextBoxFor(m => m.Address.AddressStreet, htmlAttributes: new { @name = "StreetName", @id = "StreetName" })
 
 
 
@AddressResource.US_POSTAL_CODE_LABEL_TEXT:(Required)
 
@Html.TextBoxFor(m => m.Address.PostalCode, htmlAttributes: new { @name = "ZipCode", @id = "ZipCode", @required = "required" })
 
  

}

请建议。

Answer 1

添加自定义validation器：

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

_如果你想接受zipcode之间的空格¹ ，请使用/^\d{5}(?:[\s-]\d{4})?$/代替模式。

然后在您的选项中指定它：

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

请注意，扩展库additional-methods.js也有一个zipcodeUSvalidation器（但除非你使用任何其他的，否则包含它可能没有意义）。

---

¹根据规范，正确格式化的邮政编码由五（5）个数字或五（5）个数字跟随者用连字符（ – ）和四（4）个附加数字组成。 技术上不应该接受空间，但无论如何我都会提供模式。

Answer 2

只需包含additional-methods.js文件并使用zipcodeUS规则。

 $("#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"); 

Answer 3

您可以定义自定义validation器：

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

然后像这样使用它

Answer 4

邮政编码validation程序是在additional-methods.js中提供的，但我会质疑为什么要问国家信息，如果你要使除美国以外的任何国家的表格无效？ 请记住，世界上只有约5％的人口使用美国邮政编码。 我建议您根据用户实际选择的国家/地区制作邮政编码validation程序。