Question

在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稍后检索这些值。

Answer 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

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

1 个答案: