将 select2 限制为仅接受电子邮件地址

Limit select2 to only accept email addresses

本文关键字：电子邮件地址 select2      更新时间：2023-09-26

>我有一个 select2 框，我将其限制为仅接受电子邮件地址。

我正在尝试通过编写自定义formatSelection函数来做到这一点，因为

formatSelection: function(object, container){
        if(validateEmail(object.text)){
            return object.text;
        }
        else{
            return "";
        }
    }

我希望返回一个空字符串足以不显示此输入 select2 ，但我得到一个空结果。

从 select2 4.0 + 开始，只需使用 createTag 函数：

createTag: function(term, data) {
    var value = term.term;
    if(validateEmail(value)) {
        return {
          id: value,
          text: value
        };
    }
    return null;            
}
function validateEmail(email) {
    var re = /^(([^<>()[']''.,;:'s@"]+('.[^<>()[']''.,;:'s@"]+)*)|(".+"))@(('[[0-9]{1,3}'.[0-9]{1,3}'.[0-9]{1,3}'.[0-9]{1,3}])|(([a-zA-Z'-0-9]+'.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
}

我已经解决了这个问题。只需复制粘贴下面的代码，它就会顺利运行。

validate: function(value) {
            if(value && value.length != 0){
                var emailText = "";
                var isValidEmail = true;
                var isEmailLengthValid = true;
                for (var i in value) {
                    var email = value[i];
                    isValidEmail = validateEmail(email);
                    if(isValidEmail == false){
                        break;
                    }else{
                        emailText = (i == 0) ? emailText : ", " + emailText;
                        if(emailText.length > 250){
                            isEmailLengthNotValid = false;
                            break;
                        }
                    }
                }
                if(isValidEmail == false){
                    return 'Enter a valid email address';
                }else if(isEmailLengthValid == false){
                    return 'Maximum 250 characters allowed';
                }
            }
        }

还要添加下面的函数 validateEmail（），它使用正则表达式来验证电子邮件字符串。

function validateEmail(email) { 
    var re = /^(([^<>()[']''.,;:'s@'"]+('.[^<>()[']''.,;:'s@'"]+)*)|('".+'"))@(('[[0-9]{1,3}'.[0-9]{1,3}'.[0-9]{1,3}'.[0-9]{1,3}'])|(([a-zA-Z'-0-9]+'.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
}
从

您的问题中不清楚数据源在哪里。 如果数据源来自 Ajax 调用，则可以执行服务器端验证并仅返回电子邮件地址。

但我怀疑您想接受用户输入，并且只接受有效的电子邮件地址。 Select2 文档在初始化$opts中解释了 createSearchChoice 函数。 您可以在此处插入验证电子邮件功能，并决定是否要接受新答案。

您甚至可能希望将发现的任何错误写入外部 DOM 元素，以便用户知道他们必须返回并更正无效的电子邮件地址。

    //Allow manually entered text in drop down.
    createSearchChoice: function(term, data) {
        if ( $(data).filter( function() {
            return this.text.localeCompare(term) === 0;
        }).length === 0) {
            return {id:term, text:term};
        }
    },

我使用 select2 4.01

正则表达式验证器电子邮件

function isEmail(myVar){
    var regEmail = new RegExp('^[0-9a-z._-]+@{1}[0-9a-z.-]{2,}[.]{1}[a-z]{2,5}$','i');
    return regEmail.test(myVar);
}

如果它无效，我只返回一个没有 ID 的文本在返回 JSON 中。 在此 CAS 中，可以添加警报 无可选。

createTag: function (params) 
{
                        if(!isEmail(params.term)){
                            return {
                                text: params.term,
                            };
                        }
                        return {
                          id: params.term,
                          text: params.term,
                        };
}

在模板中结果

function formatRepoReceiver (repo) {
      if (repo.loading) return repo.text;
        var markup =  "";
        if(typeof(repo.email) == 'undefined'){
           // >>>your Alert<<<<
          if(!isEmail(repo.text)){
            if(repo.text == ''){
                return null;
            }
            return 'Address email no valid';
          }  
          //----------------------------
          markup = "<div class='select2-result-repository clearfix'>"+
                        "<div class='select2-result-repository__meta'>" +
                            "<span>"+ repo.text +"</span> "+
                            "(<span>" + repo.text + "</span>)"+
                        "</div>"+
                    "</div";
      }
      else{
        markup = "<div class='select2-result-repository clearfix'>"+
                        "<div class='select2-result-repository__meta'>" +
                            "<span>"+ repo.name +"</span> "+
                            "(<span>" + repo.email + "</span>)"+
                        "</div>"+
                    "</div";
      }
      return markup;
    }

$('.select2-tokenizer').on('change', function() {
var num= this.value
if(!$.isNumeric(num)){
   $('option:selected',this).remove();
   Swal.fire({
                          icon: 'error',
                          title: 'Oops...',
                          text: 'Please enter an integer!'
                        })
} 
});
相关文章：