作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用最新版本的jQuery Validator plugin以及 jQuery (1.6.2)。
在电话号码的可选字段中,我有一个defaultValue
。
HTML:
<input type="text" class="autoclear blur" value="your telephone number" name="Phone" />
我按照 this thread 安装了用于验证电话号码的自定义方法。这个想法是,即使该字段是可选的,我仍然想在输入文本时验证它。
jQuery/JavaScript:
$(document).ready(function() {
var nameMsg = "Please enter your full name.",
emailMsg = "Please enter your email address.",
emailMsgV = "This is not a valid email address.",
commentsMsg = "Please enter your comments.";
$.validator.addMethod('phone', function (value, element) {
return this.optional(element) || /^[01]?[- .]?\(?[2-9]\d{2}\)?[- .]?\d{3}[- .]?\d{4}$/.test(value);
}, 'This is not a valid number.');
$('#contactForm').validate({
onkeyup: false,
validClass: 'valid',
rules: {
Name: {
required: true
},
email: {
required: true,
email: true
},
Phone: {
required: false,
phone: true
},
Comments: {
required: true
}
},
messages: {
Name: nameMsg,
email: {
defaultInvalid: emailMsg,
required: emailMsg,
email: emailMsgV
},
Comments: commentsMsg
},
success: function(error) {
setTimeout(function() { // Use a mini timeout to make sure the tooltip is rendred before hiding it
$('#contactForm').find('.valid').qtip('destroy');
}, 1);
},
submitHandler: function(form) {
$('#contactForm .autoclear').each(function() {
if (this.value === this.defaultValue) {
this.value = '';
}
});
form.submit();
},
errorPlacement: function(error, element) {
$(element).filter(':not(.valid)').qtip({
overwrite: false,
content: error,
position: {
my: 'left center',
at: 'right center'
},
show: {
event: false,
ready: true
},
hide: false
}).qtip('option', 'content.text', error);
} // closes errorPlacement
}) // closes validate()
}); // closes document.ready()
问题是,由于我在这个可选字段上有一个 defaultValue
,所以它也得到了验证。
是否可以编辑phone
的自定义方法,使其在字段留空时忽略该字段上的defaultValue
?
我尝试用 if/then
包围正则表达式,但这似乎不起作用。
$.validator.addMethod('phone', function (value, element) {
if (value != element.defaultValue) {
return this.optional(element) || /^[01]?[- .]?\(?[2-9]\d{2}\)?[- .]?\d{3}[- .]?\d{4}$/.test(value);
}
}, 'This is not a valid number');
在思考它是如何工作的之后,我知道这是错误的方法......所以现在我迷路了。
最佳答案
似乎您需要从传递给 addMethod
的函数中返回某些内容:
$.validator.addMethod('phone', function (value, element) {
if (value != element.defaultValue) {
return this.optional(element) || /^[01]?[- .]?\(?[2-9]\d{2}\)?[- .]?\d{3}[- .]?\d{4}$/.test(value);
}
return true;
}, 'This is not a valid number');
关于jquery - 如何在具有 defaultValue 的可选字段上使用 jQuery Validator 自定义方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7720753/
我是一名优秀的程序员,十分优秀!