Как проверить почтовый индекс США с помощью плагина JQuery Validation
Я использую плагин jQuery Validation для проверки моей формы.
Я хочу проверить почтовый индекс в соответствии с форматом ZIP-кода США: -
> 12345
> 12345-6789
> 12345 6789
В соответствии с моим текущим кодом его проверка zip-кода должна быть не более 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>
}
Просьба предложить.
Ответы
Ответ 1
Добавить пользовательский валидатор:
jQuery.validator.addMethod("zipcode", function(value, element) {
return this.optional(element) || /^\d{5}(?:-\d{4})?$/.test(value);
}, "Please provide a valid zipcode.");
_ Если вы хотите принять пробелы 1 между zipcode, используйте /^\d{5}(?:[\s-]\d{4})?$/
для шаблона.
затем укажите его в своих параметрах:
rules: {
...
'Address.PostalCode': {
...
zipcode: true,
...
},
...
}
Обратите внимание, что в библиотеке расширения additional-methods.js также есть средство проверки zipcodeUS
(но если вы не используете какие-либо другие, это может не иметь смысла включить его).
1 В соответствии со спецификацией правильно отформатированные почтовые индексы состоят из пяти (5) цифр или пяти (5) чисел, следующих дефисом (-) и четырьмя (4) дополнительными номерами. Пространство не должно быть технически приемлемым, но я предоставил шаблон независимо.
Ответ 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");
Ответ 3
Вы можете определить пользовательский валидатор:
jQuery.validator.addMethod('zipcode', function(value, element) {
return this.optional(element) || !!value.trim().match(/^\d{5}(?:[-\s]\d{4})?$/);
}, 'Invalid zip code');
Затем используйте его так:
<input class="zipcode"/>
Ответ 4
Процедуры проверки почтового индекса предоставляются в дополнительных методах .js, но я бы спросил, почему вы запрашиваете информацию о стране, если вы собираетесь аннулировать форму для любой страны, кроме США? Пожалуйста, помните, что только около 5% населения мира использует американский почтовый индекс. Я бы рекомендовал вам выполнить процедуры проверки почтового индекса в зависимости от страны, выбранной пользователем.