jQuery验证-只允许二取一
我需要一点帮助。所以有一个表格,我有两个字段,手机和电话。只需要一个。我下面的代码就是这样做的,但我想说的是,我不希望人们同时填写这两个。有人能告诉我怎么做吗 所以,若两者都为空,则显示所需消息,若其中一个为空,则允许发送表单,(完成) 如果两者都为空,则不允许发送表单和显示消息。(需要帮助) 顺便说一句,我使用的是jQuery Basistance验证器 非常感谢jQuery验证-只允许二取一,jquery,jquery-validate,Jquery,Jquery Validate,我需要一点帮助。所以有一个表格,我有两个字段,手机和电话。只需要一个。我下面的代码就是这样做的,但我想说的是,我不希望人们同时填写这两个。有人能告诉我怎么做吗 所以,若两者都为空,则显示所需消息,若其中一个为空,则允许发送表单,(完成) 如果两者都为空,则不允许发送表单和显示消息。(需要帮助) 顺便说一句,我使用的是jQuery Basistance验证器 非常感谢 mobile : { required: function(element) { if ($("#te
mobile : {
required: function(element) {
if ($("#telephone").val().length > 0) {
return false;
}
else {
return true;
}
}
},
telephone: {
required: function(element) {
if ($("#mobile").val().length > 0) {
return false;
}
else {
return true;
}
}
},
messages: {
mobile: "Mobile is required",
telephone: "Telephone is required",
},
您可以保留一个包含已验证项目数量的变量:
validatedItems : 0,
mobile : {
var self = this;
required: function(element) {
if ($("#telephone").val().length > 0) {
self.validatedItems--;
return false;
}
else {
self.validatedItems++;
return true;
}
}
},
telephone: {
var self = this;
required: function(element) {
if ($("#mobile").val().length > 0) {
self.validatedItems--;
return false;
}
else {
self.validatedItems++;
return true;
}
}
},
然后,您可以在发送表单时检查是否验证了一个或多个项目:
if( validatedItems > 0 ) {
sendForm();
}
从文档的快速阅读来看,验证程序的默认方法似乎是设计用于对不了解其他字段的字段进行操作的。定义你自己的可能更简洁:
function XOR_value_validator(value, el, args) {
var otherValue = $(args[0]).val();
return (value && !otherValue) || (!value && otherValue);
}
jQuery.validator.addMethod(
'XOR_with',
XOR_value_validator,
jQuery.validator.format('{1}')
);
并使用类似于:
mobile : {
XOR_with: [
'#telephone', // assumed to be a jQuery selector for an element with a value()
'Please enter either a telephone number or a mobile number.' // error message
]
},
telephone: {
XOR_with: [
'#mobile', // assumed to be a jQuery selector for an element with a value()
'Please enter either a telephone number or a mobile number.' // error message
]
}
这是免费的!:P我在这个文本区域中完全没有经过测试(来自文档)
编辑:
关于评论:
如果在用户填写表单时持续执行此代码,则可能会插入相应的功能来启用/禁用表单元素。但是,我建议不要这样做,因为这部分代码应该只关注验证,而不是用户体验
要将功能扩展到两个以上的字段(同样,未测试),可以执行以下操作:
function one_field_allowed_validator(value, el, args) {
var otherFields = args[0],
valuesFound = value ? 1 : 0;
for (var i = 0, limit = otherFields.length; i < limit; ++i) {
var val = $(otherFields[i]).val();
if (val && ++valuesFound === 2) {
return false;
}
}
return valuesFound !== 0;
}
jQuery.validator.addMethod(
'Allow_one_with',
one_field_allowed_validator,
jQuery.validator.format('{1}')
);
现在感觉很不舒服!对于Allow_one_With组中的每个附加字段,必须使用验证更新所有现有Allow_one_(以包括新字段和可能的新错误消息)。除了XOR之外,我不愿意使用我的方法。将required方法与依赖项espression(jquery选择器)一起使用,这种情况下使用的是:blank伪选择器,它是validate插件的一部分
$(form).validate({
rules
{
mobile:{required: '#telephone:blank'}
telephone:{required: '#mobile:blank'}
}
});
从文档-'通常,表达式将使用选择器过滤器,如#foo:checked、#foo:filled、#foo:visible。这个插件提供了一些功能
编辑
对不起,我没有完全阅读这个问题。最接近您需要的方法是jQuery validate的addition-methods.js文件中的require\u from\u group方法。您需要一个非常小的调整来测试您组中的一个验证字段
乙二醇
如果您将其与addional-methods.js中的原始方法进行比较,您会发现它几乎是相同的
希望这会有所帮助-您需要用“电话”和“手机”替换零件号和说明,并且您应该设置
此解决方案使用验证插件的标准功能。我使用require_from_group规则确保至少有一个已填充,然后使用maxlength规则在另一个已填充的情况下不允许一个。只需确保电话组类被添加到两个输入字段中,以支持require_from_group规则
$("form").validate({
rules: {
mobile: {
require_from_group: [1, ".phone-group"],
maxlength: {param: 0, depends: "#telephone:filled"}
},
telephone: {
require_from_group: [1, ".phone-group"],
maxlength: {param: 0, depends: "#mobile:filled"}
}
},
messages: {
mobile: "Please enter either a telephone number or a mobile number.",
telephone: "Please enter either a telephone number or a mobile number."
}
});
谢谢但它允许我在填写两个字段时提交表单。我需要它只提交表格时,其中一人填写,而不是双方。谢谢。它可以工作,但我还有其他字段需要验证,当我输入这段代码时,它会忽略对其他字段的验证。有什么想法吗?是的,这个方法有一个问题,也许可以用另一个解决方案,非常感谢c24w。它起作用了。有一件事是可以禁用另一个字段,这样他们就不能输入任何内容了吗?@devofash:很高兴它能工作(而且我只犯了两个语法错误!):)您想在什么时候禁用另一个字段?谢谢。。但它不起作用。返回true时出错。固定了{(花括号)这消除了错误,但仍然不起作用,只是提交表单。恐怕根本不起作用,让表单在没有任何验证的情况下提交。在没有看到所有代码的情况下进行调试是很困难的。从我浏览器中的一些代码中,我可以确认
one\u field\u allowed\u validator
功能正常工作。你能安装一个jsf吗伊德尔
<form>
<input class="productinfo" name="partnumber" />
<input class="productinfo" name="description" />
<input type="submit" />
</form>
jQuery.validator.addMethod("require_from_group_exact", function(value, element, options) {
var validator = this;
var selector = options[1];
var validOrNot = $(selector, element.form).filter(function() {
return validator.elementValue (this);
}).length == options[0];
if(!$(element).data('being_validated')) {
var fields = $(selector, element.form);
fields.data('being_validated', true);
fields.valid();
fields.data('being_validated', false);
}
return validOrNot;
}, jQuery.format("Please fill {0} of these fields."));
$('form').validate({
rules:{
partnumber: {require_from_group_exact: [1,".productinfo"]},
description: {require_from_group_exact: [1,".productinfo"]}
}
});
$("form").validate({
rules: {
mobile: {
require_from_group: [1, ".phone-group"],
maxlength: {param: 0, depends: "#telephone:filled"}
},
telephone: {
require_from_group: [1, ".phone-group"],
maxlength: {param: 0, depends: "#mobile:filled"}
}
},
messages: {
mobile: "Please enter either a telephone number or a mobile number.",
telephone: "Please enter either a telephone number or a mobile number."
}
});