如何在文本输入 HTML 中添加多个电子邮件地址答案

【问题标题】：How to add multiple Email addresses in text input HTML如何在文本输入 HTML 中添加多个电子邮件地址
【发布时间】：2014-05-22 10:01:42
【问题描述】：

在 HTML5 中使用此代码，我希望 用户能够在输入框中添加多个电子邮件地址...

<div class="modal-body row-fluid" align="left">
  <span class="loader-gif" style="display:none;"><img src="<?php echo $baseURL?>/watever/img/ajax-loader-horizontal.gif"></span>
  Email:
  <input type="email" multiple="multiple" autofocus="" pattern="^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$" style="display:none;width:91%;cursor:text;" />Links:
  <input type="text" readonly="readonly" style="display:none;width:91%;cursor:text;" />
  <span class="message" style="display:none;"></span>
</div>

我在输入 type="email" 中添加了多个属性，但我仍然无法在浏览器中添加多个电子邮件地址，

我正在使用 Firefox 最新版本进行测试。我只想知道，允许用户在该输入框中添加多个电子邮件地址的方法是什么？以及以后如何使用 Javascript 检索这些值。

【问题讨论】：

使用 type='email' 是否 100% 重要？
@AndyHolmes 不，只是想像一下，所以稍后我可以应用特定于电子邮件的属性，例如这些 link
如果您不需要使用 type="email" 则将其设置回默认并允许用户输入电子邮件地址逗号分隔
我希望那些对格式化问题投反对票的人也对答案有所了解，否则，更适合文本格式化程序而不是程序员。
@AndyHolmes ：好的，我尝试使用 type="text" 然后看看会发生什么

标签： javascript jquery html

【解决方案1】：

试试这个，包含 jquery 并根据您的文件位置验证 js 文件

<html>
<head>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="jquery.validate.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
  jQuery.validator.addMethod("multiemail", function (value, element) {
        if (this.optional(element)) {
            return true;
        }
        var emails = value.split(','),
            valid = true;
        for (var i = 0, limit = emails.length; i < limit; i++) {
            value = emails[i];
            valid = valid && jQuery.validator.methods.email.call(this, value, element);
        }
        return valid;
    }, "Please separate email addresses with a comma and do not use spaces.");


 $("#emailFrm").validate({
    errorElement:'div',
    rules: {
        emails: {
            required: true,
            multiemail:true
        }
    },
    messages: 
    {
        emails: {
            required:"Please enter email address."
        }
    }
 });
});
</script>
</head>
<body>
<form method="post" id="emailFrm">
<input type="text"  name="emails"  />
<input type="submit" name="submit" value="submit">
</form>
</body>

演示 click here

【讨论】：

是的，很好的领导。我也想知道验证逻辑是否有问题。