使用tagit验证标签

时间:2014-05-14 08:53:32

标签: javascript jquery tag-it

我使用以下标记 - 插件:http://widen.github.io/jQuery-Tagit/

我想验证标签,输入将是电子邮件地址。我怎么能这样做?

我的代码:

HTML

<div id="editOnClick" class="example">
    <ul name="email[]" id="email"></ul>
</div>

JavaScript(jQuery)

$(document).ready(function () {
        $('#editOnClick > ul').tagit({
            select:true,
            triggerKeys:['comma', 'enter', 'space', 'semicolon', 'tab'],
            tagSource:"view_email_get_emails.php",
            editOnClick:true 
            beforeTagAdded: function(event, ui) {
              return isEmail($('#email').tagit("tags"))}  

 });

function isEmail(email) {
    var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    return regex.test(email);
}
        });
        });

我将代码添加到JSFiddle

1 个答案:

答案 0 :(得分:7)

我使用tagsChanged回调来检测添加新标记的时间,然后验证,如果无效则将其删除。我看到你使用了beforeTagAdded - 我不确定你从哪里得到的?但我不知道这个插件。

以下代码完成了这项工作。 Updated JSFiddle

    $(document).ready(function () {
        $('#editOnClick > ul').tagit({
            select:true,
            triggerKeys:['comma', 'enter', 'space', 'semicolon', 'tab'],
            tagSource:"view_email_get_emails.php",
            editOnClick:true,
            tagsChanged: function(tagValue, action, element){
                if (action == 'added'){
                    if (!isEmail(tagValue)){
                        $('#editOnClick > ul').tagit("remove", 'tag', tagValue);

                    }
                }

            });


        function isEmail(email) {
            var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
            return regex.test(email);
        }

    });