如果我们在页面上调用prototype.js，多电子邮件验证方法不起作用？

发布于 2024-09-24 04:54:35 字数 3172 浏览 1 评论 0原文

我创建了一个添加电子邮件方法（jquery）来验证收件人文本框的多封电子邮件。当页面上未声明prototype.js时，它工作正常。为了消除 $ 冲突，我还采用了 $ noconflict() 方法来衡量。除收件人电子邮件验证字段外，其他字段验证都在此场景中起作用。根据我的发现“jQuery.validator.methods.email.call(this, value, element)”，页面的第 50 行不起作用，因此该方法没有触发。我还需要调用prototype.js。请参阅以下代码以获得更清楚的理解......提前致谢。

请看下面的代码：多电子邮件验证
var JQ = jQuery.noConflict();
JQ(文档).ready(function() {

  // Handler for .ready() called.
JQ("#email-form").validate({
            rules : {
                email : {
                    required : true,
                                    email : true
                },
                            recipientEmail : {
                    multiemail: true,
                                    required : true
                            //      email : true
                                    }
            },
                    messages: {
                email: {
                    required: "Please enter your email address.",
                                    email: "Please enter a valid email address"
                 },
                             recipientEmail: {
                                    multiemail: "One or more of your recipient email addresses needs correction.",
                                    required: "Please enter the recipient's email address."
                                    //email: "Please enter a valid email address"
                }
            }
        }); 
});

JQ.validator.addMethod("多电子邮件", 函数(值, 元素) { if (this.Optional(element)) // 在可选元素上返回 true 返回真； // var emails = value.split( new RegExp( "\s*,\s*", "gi" ) ); var emails = value.split( new RegExp( "\s*,\s*", "gi" ) );

       valid = true; 
               maxEmaillength = emails.length;
       for(var i in emails) 
            {
         value = emails[i]; 
         valid = valid && jQuery.validator.methods.email.call(this, value, element);
                     // Maximum email length validation
                       if(maxEmaillength > 5)
                               {
                                       JQ('label.error:first').html("Please enter only 5 mail IDs at a time");
                                       JQ('label.error:first').css(display, block);                            
                                       setTimeout(alert("Please enter only 5 mail IDs at a time"), 5);
                            }       
        } 
        return valid; 
                    }, 'One or more email addresses are invalid');

</head>
<body>
<form action="" method="get" name="email-form" id="email-form">
<label for="email">email</label>
<input type="text" name="email" id="email" style="width:200px" />
<br />
<label for="recipientEmail">Recipient Email</label>
<input type="text" name="recipientEmail" id="recipientEmail" style="width:500px" /><br />

<input type="submit" name="Submit" id="Submit" value="Submit" />
</form>
</body>
</html>

原文

I have created a add email method (jquery) to validate a multiple emails for recipient text box. it's working fine when prototype.js is not declared on the page. To get rid of the $ conflict i also incorporated the $ noconflict() method measure measure. The other field validations are working in this scenario, except the receipient email validation field. AS per my finding "jQuery.validator.methods.email.call(this, value, element)" line no 50 of the page is not working and hence the method is not firing . I need to call the prototype.js as well. Please see the following code for a clearer understanding.......Thanks in advance.

Please see the code below:

Multi Email Validation

var JQ = jQuery.noConflict();
JQ(document).ready(function() {

  // Handler for .ready() called.
JQ("#email-form").validate({
            rules : {
                email : {
                    required : true,
                                    email : true
                },
                            recipientEmail : {
                    multiemail: true,
                                    required : true
                            //      email : true
                                    }
            },
                    messages: {
                email: {
                    required: "Please enter your email address.",
                                    email: "Please enter a valid email address"
                 },
                             recipientEmail: {
                                    multiemail: "One or more of your recipient email addresses needs correction.",
                                    required: "Please enter the recipient's email address."
                                    //email: "Please enter a valid email address"
                }
            }
        }); 
});

JQ.validator.addMethod("multiemail", function(value, element) {
if (this.optional(element)) // return true on optional element
return true;
// var emails = value.split( new RegExp( "\s*,\s*", "gi" ) );
var emails = value.split( new RegExp( "\s*,\s*", "gi" ) );

       valid = true; 
               maxEmaillength = emails.length;
       for(var i in emails) 
            {
         value = emails[i]; 
         valid = valid && jQuery.validator.methods.email.call(this, value, element);
                     // Maximum email length validation
                       if(maxEmaillength > 5)
                               {
                                       JQ('label.error:first').html("Please enter only 5 mail IDs at a time");
                                       JQ('label.error:first').css(display, block);                            
                                       setTimeout(alert("Please enter only 5 mail IDs at a time"), 5);
                            }       
        } 
        return valid; 
                    }, 'One or more email addresses are invalid');

</head>
<body>
<form action="" method="get" name="email-form" id="email-form">
<label for="email">email</label>
<input type="text" name="email" id="email" style="width:200px" />
<br />
<label for="recipientEmail">Recipient Email</label>
<input type="text" name="recipientEmail" id="recipientEmail" style="width:500px" /><br />

<input type="submit" name="Submit" id="Submit" value="Submit" />
</form>
</body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

难得心□动 2024-10-01 04:54:35

我只是稍微改变了方法，因为 jQuery.validator.methods.email.call(this, value, element) 在以前的自定义方法中不起作用。虽然我找不到确切的原因，但为什么它不适用于prototype.js以及该问题的确切解决方案是什么。但以下代码片段可以按预期工作。只需将之前的 jquery 自定义电子邮件方法替换为以下方法即可。

function validateEmail(field) {
    var regex=/\b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b/i;
    return (regex.test(field)) ? true : false;
}

JQ.validator.addMethod("multiemail", function(value, element)
{
    var result = value.split(",");
    for(var i = 0;i < result.length;i++)
    if(!validateEmail(result[i]) || result.length > 5) 
    return false;               
    return true;                                                       

},'One or more email addresses are invalid');

I have just change the approach a little bit, as jQuery.validator.methods.email.call(this, value, element) was not working in the previous custom method. Although i could not find the exact reason, why that was not working with prototype.js and what the exact solution for that problem. But the following code snippet is working as desired. Just replace that previous jquery custom email method with the following one.

function validateEmail(field) {
    var regex=/\b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b/i;
    return (regex.test(field)) ? true : false;
}

JQ.validator.addMethod("multiemail", function(value, element)
{
    var result = value.split(",");
    for(var i = 0;i < result.length;i++)
    if(!validateEmail(result[i]) || result.length > 5) 
    return false;               
    return true;                                                       

},'One or more email addresses are invalid');

回复收藏 0 原文

~没有更多了~