如何在 Bootstrapvalidator 中验证用逗号或半克隆分隔的多个电子邮件的电子邮件输入字段

Posted

技术标签:

【中文标题】如何在 Bootstrapvalidator 中验证用逗号或半克隆分隔的多个电子邮件的电子邮件输入字段【英文标题】:How to validate email input field for multiple email separated by comma or semi-clone in Bootstrapvalidator 【发布时间】:2020-04-20 22:50:34 【问题描述】:

我有一个用于多个电子邮件输入的文本区域,我想使用引导验证器来验证电子邮件。我不能这样做,因为有多个选项默认为false,而我无法设置为true

供您参考(引导验证器页面):http://bootstrapvalidator.votintsev.ru/validators/emailAddress/

<div class="form-group">
<label for="email" class="col-sm-4 control-label"><span class="required">*</span> Email</label>
<div class="col-sm-8">
    <textarea id="company_email" name="email" class="form-control pull-left" rows="2" placeholder="Email"></textarea>
</div>

    <script type="text/javascript">
        $(document).ready(function() 
            $('#emailForm').bootstrapValidator(
                feedbackIcons: 
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                ,
                fields: 
                    email: 
                        validators: 
                            notEmpty: 
                                message: 'Email is required and cannot be empty'
                            ,
                            emailAddress: 
                                message: 'The value is not a valid email address'
                            
                        
                    
                
            
        );
    </script> 

【问题讨论】:

你为什么不使用正则表达式? 您可以做的一件事是 - 用(逗号或分号)分割文本区域的值,您将获得一个电子邮件地址数组,遍历每个地址并执行验证 【参考方案1】:

从您提供的链接:

通过 html 属性设置选项时,请记住通过设置 data-bv-emailaddress="true" 来启用验证器。 使用 HTML 5 type="email" 属性时,您不需要这样做。

只需将这些属性添加到您的文本区域: data-bv-emailaddress-multiple="true" data-bv-emailaddress="true"

测试一下:

$(document).ready(function() 
    $('#emailForm').bootstrapValidator(
                feedbackIcons: 
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                ,
                fields: 
                    email: 
                        validators: 
                            notEmpty: 
                                message: 'Email is required and cannot be empty'
                            ,
                            emailAddress: 
                                message: 'The value is not a valid email address'
                            
                        
                    
                
            );
);
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script>
</head>
<body>


<form id="emailForm" class="form-horizontal">
    <div class="form-group">
<label for="email" class="col-sm-4 control-label"><span class="required">*</span> Email</label>
<div class="col-sm-8">
    <textarea id="company_email" name="email" class="form-control pull-left" rows="2" placeholder="Email" data-bv-emailaddress-multiple="true" data-bv-emailaddress="true"></textarea>
</div>
</form>


</body>
</html>

【讨论】:

以上是关于如何在 Bootstrapvalidator 中验证用逗号或半克隆分隔的多个电子邮件的电子邮件输入字段的主要内容,如果未能解决你的问题,请参考以下文章

支付宝PC扫码支付在Safari浏览器中验签失败(invalid-signature)

在本地使用 bootstrapValidator 发送静态数据

如何在 Bootstrapvalidator 中验证用逗号或半克隆分隔的多个电子邮件的电子邮件输入字段

使用bootstrapvalidator的remote验证经验

黄聪: Bootstrap之Form表单验证神器: BootstrapValidator(转)

Bootstrapvalidator 在动态输入字段中不起作用