SRS： 我需要验证一个由5个电子邮件字段组成的表单。 规则如下： 这些字段中的至少一个，无论位置和顺序如何，都应该是有效的电子邮件。
到目前为止我的代码：
$("#frm_referral_email").validate({
rules: {
referral_invitation_text: {required: true}
},
messages: {
referral_invitation_text: "Enter your message"
},
// the errorPlacement has to take the table layout into account
errorPlacement: function(error, element) {
if (error.html() != "")
error.appendTo( element.parent().next() );
},
// specifying a submitHandler prevents the default submit, good for the demo
submitHandler: function() {
// if(!("#frm_referral_email").valid())
// return false;
var valid = true;
$('.referral_email').each(function(){
if($(this).hasClass('error')){
valid = false;
return true;
}
});
if(!valid){
return false;
}
var coworker_invitation_text = $('#frm_referral_email #referral_invitation_text').val();
var coworker_invitation_text_ext = $('#frm_coworker_email #referral_invitation_text_ext').html();
var referral_email_coworker_sent = $('#coworker_email_sent').val();
var referral_email_not_sent = $('#coworker_email_not_sent').val();
var user_full_name = $('#user_full_name').val();
var from_email = $('#user_email').val();
var referral_email_arr = [];
var i = 0;
$('.referral_email').each(function()
{
var elem = $(this);
if (elem.val().indexOf("example") < 0 && elem.val() != ""){
coworker_email_arr.push(elem.val());
i++;
}
});
if (i ==0 ){
$("#frm_referral_msg").html(get_phrase("enter_emails"));
return;
}
var email_send = new email_generator(referral_email_arr,from_email, get_phrase("invite_subject") ,coworker_invitation_text, referral_email_invatation_text_ext,referral_email_sent,referral_email_not_sent);
email_send.send('frm_coworker_msg');
},
// set this class to error-labels to indicate valid fields
success: function(label) {
// set as text for IE
//label.html(" ").addClass("checked");
}
});
$(".coworker_email, .coworker_email.error").rules("add", {
// require_from_group: [1, '.referral_email'],
email:true,
required: {
depends: function(element){
var sumUp = 0;
$(".coworker_email").each(function(){
sumUp += $(this).val().length;
});
if(sumUp == 0)
return true;
else
return false;
}
},
messages: "Please enter at least one valid email"
});
HTML：
<div>
<span style='text-align:left;'><?=get_phrase("EmailAddresses")?>:</span>
<br/>
<input type='text' class='referral_email' placeholder='example@<?=$company_domain_name?>'/>
<br/>
<input type='text' class='referral_email' placeholder='example@<?=$company_domain_name?>'/>
<br/>
<input type='text' class='referral_email' placeholder='example@<?=$company_domain_name?>'/>
<br/>
<input type='text' class='referral_email' placeholder='example@<?=$company_domain_name?>'/>
</div>
<div class='error_msg'></div>
以我的拙见，这太复杂了，因为我想要实现的目标非常简单。 虽然我采取了很多方法来确保其功能，但仍然存在错误，例如，如果您在最后一个字段中输入了错误的输入，并按两次提交，错误消息将消失，我不知道哪个是理性的解释可以解释这种行为。
答案 0 :(得分：1)
自定义验证方法适用于这种情况
JS（JavaScript）
//valid email checking function
function validateEmail(email) {
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
//custom method for jquery validator
$.validator.addMethod('refEmail', function (value, element, params) {
var num_valid = 0;
$(params).each(function () {
if (validateEmail($(this).val()))
num_valid++
});
return num_valid != 0;
}, 'Please enter at least one valid email address');
//specifying custom validator for your elements after $("#frm_referral_email").validate();
$('.referral_email').rules('add', {
required: false,
refEmail: '.referral_email'
})
请注意，您必须使$('.referral_email') 必需字段才能生效。这些字段最终不是必需，因为我们在自定义方法中为它们设置了required: false
我知道可能有其他方法可以实现同样的目标。
注意：您应该删除旨在促进此特定验证要求的.referral_email的所有其他验证方法。
答案 1 :(得分：1)
“在我的拙见中，这太复杂了，因为我正在努力 实现很简单。“
你是对的，你让它变得比它需要的更复杂。
“如果您在最后一个字段中输入了错误的输入，请按提交 两次，错误信息将消失，我不知道哪个 理性的解释可以解释这种行为。“
jQuery Validate插件要求您在所有输入字段上都有name属性才能正常运行。没有name属性，插件无法跟踪输入，行为非常难以预测。
此外，the additional-methods.js file内的require_from_group规则称为input。它可能在您第一次尝试时无效，因为您的name元素都缺少$(document).ready(function () {
$('#myform').validate({
groups: {
group: "name1 name2 name3 name4 name5"
},
rules: {
name1: {
require_from_group: [1, '.referral_email'],
email: true
},
name2: {
require_from_group: [1, '.referral_email'],
email: true
},
name3: {
require_from_group: [1, '.referral_email'],
email: true
},
name4: {
require_from_group: [1, '.referral_email'],
email: true
},
name5: {
require_from_group: [1, '.referral_email'],
email: true
}
}
});
});
属性。
工作演示：http://jsfiddle.net/zny9d/
我还将它与the groups option结合起来，将此分组的所有错误消息合并为一个。
<form id="myform">
<input type='text' name='name1' class='referral_email' />
<input type='text' name='name2' class='referral_email' />
<input type='text' name='name3' class='referral_email' />
<input type='text' name='name4' class='referral_email' />
<input type='text' name='name5' class='referral_email' />
</form>
<强> HTML ：
errorPlacement: function(error, element) {
if (error.html() != "")
error.appendTo( element.parent().next() );
},
在一个不相关的说明中，你不需要在这里有条件：
error.html()每当此回调触发时，errorPlacement: function(error, element) {
error.appendTo( element.parent().next() );
},
从不将为空，因此首先测试它是否为空是没有意义的。
这将起到相同的作用：
{{1}}