使用 jquery 验证验证国际电话输入
Validating International Telephone Input using jquery validation
极客们!
我们都知道名为 International Telephone Input 的出色插件,有没有办法将其自己的验证方法 intlTelInput("isValidNumber")
绑定到 jquery 验证中?
intlTelInput("isValidNumber")
returns true if true or false if false
下面还有更多详细信息!:
var handleContactFormValidation = function () {
var value_form = $('#contact_form');//form i would like to validate where phone field is in!
var value_error = $('.alert-danger', value_form);
var value_success = $('.alert-success', value_form);
value_form.validate({
errorElement: 'span', //default input error message container
errorClass: 'help-block help-block-error', // default input error message class
focusInvalid: false, // do not focus the last invalid input
ignore: "", // validate all fields including form hidden input
rules: {
phone: {
required: {
depends: function () {
if ($(this).intlTelInput("isValidNumber") == true)
return true
else
return false
}
}
},
},
现在根据结果 "isValidNumber" 方法正在返回,我需要将验证输出 {true,false} 传递给 jquery 验证,但上面没有运行
这个验证逻辑毫无意义...
rules: {
phone: {
required: {
depends: function () {
if ($(this).intlTelInput("isValidNumber") == true)
return true
else
return false
}
}
},
},
按照你写的方式,depends
属性 是说 phone
字段是 required
,而电话 phone 号码是有效,当 telephone 号码无效时,该字段不是 required
。要做出此决定,必须填写该字段。但是,如果该字段已填写,则 required
规则不再重要。因此,当它只是留空时(没有有效的 phone 数字),它不是 required
并且不会验证任何内容。
如果您想使用国际电话 phone 输入插件验证 phone 号码,那么您需要 write a custom rule using the .addMethod()
method 调用此外部 .intlTelInput()
方法.
$('#myform').validate({
.....
rules: {
phone: {
required: true, // field is mandatory
intlTelNumber: true // must contain a valid phone number
},
},
....
});
// create a custom phone number rule called 'intlTelNumber'
jQuery.validator.addMethod("intlTelNumber", function(value, element) {
return this.optional(element) || $(element).intlTelInput("isValidNumber");
}, "Please enter a valid International Phone Number");
要在不使用国际电话的情况下执行此操作phone 输入插件...
jQuery.validator.addMethod("intlTelNumber", 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]([02-9]\d|1[02-9])\)|[2-9]([02-9]\d|1[02-9]))-?[2-9]([02-9]\d|1[02-9])-?\d{4}$/ );
}, "Please enter a valid International Phone Number");
此示例显示了美国 phone 号码的正则表达式。修改它以满足您特定的 phone 号码要求。提示:查看您的国际电讯phone 输入插件以获得正确的正则表达式。
极客们!
我们都知道名为 International Telephone Input 的出色插件,有没有办法将其自己的验证方法 intlTelInput("isValidNumber")
绑定到 jquery 验证中?
intlTelInput("isValidNumber")
returns true if true or false if false
下面还有更多详细信息!:
var handleContactFormValidation = function () {
var value_form = $('#contact_form');//form i would like to validate where phone field is in!
var value_error = $('.alert-danger', value_form);
var value_success = $('.alert-success', value_form);
value_form.validate({
errorElement: 'span', //default input error message container
errorClass: 'help-block help-block-error', // default input error message class
focusInvalid: false, // do not focus the last invalid input
ignore: "", // validate all fields including form hidden input
rules: {
phone: {
required: {
depends: function () {
if ($(this).intlTelInput("isValidNumber") == true)
return true
else
return false
}
}
},
},
现在根据结果 "isValidNumber" 方法正在返回,我需要将验证输出 {true,false} 传递给 jquery 验证,但上面没有运行
这个验证逻辑毫无意义...
rules: {
phone: {
required: {
depends: function () {
if ($(this).intlTelInput("isValidNumber") == true)
return true
else
return false
}
}
},
},
按照你写的方式,depends
属性 是说 phone
字段是 required
,而电话 phone 号码是有效,当 telephone 号码无效时,该字段不是 required
。要做出此决定,必须填写该字段。但是,如果该字段已填写,则 required
规则不再重要。因此,当它只是留空时(没有有效的 phone 数字),它不是 required
并且不会验证任何内容。
如果您想使用国际电话 phone 输入插件验证 phone 号码,那么您需要 write a custom rule using the .addMethod()
method 调用此外部 .intlTelInput()
方法.
$('#myform').validate({
.....
rules: {
phone: {
required: true, // field is mandatory
intlTelNumber: true // must contain a valid phone number
},
},
....
});
// create a custom phone number rule called 'intlTelNumber'
jQuery.validator.addMethod("intlTelNumber", function(value, element) {
return this.optional(element) || $(element).intlTelInput("isValidNumber");
}, "Please enter a valid International Phone Number");
要在不使用国际电话的情况下执行此操作phone 输入插件...
jQuery.validator.addMethod("intlTelNumber", 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]([02-9]\d|1[02-9])\)|[2-9]([02-9]\d|1[02-9]))-?[2-9]([02-9]\d|1[02-9])-?\d{4}$/ );
}, "Please enter a valid International Phone Number");
此示例显示了美国 phone 号码的正则表达式。修改它以满足您特定的 phone 号码要求。提示:查看您的国际电讯phone 输入插件以获得正确的正则表达式。