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

Question

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

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

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

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

Answer 1

从 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);
}

Answer 2

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

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);
} 

Answer 3

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

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

您甚至可能希望将您发现的任何错误写入外部 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};
        }
    },

Answer 4

我使用 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);
}

如果它无效，我在返回 json 中只返回一个没有 id 的文本。在这种情况下，您可以添加不可选的警报。

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;
    }

Answer 5

$('.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!'
                        })

} 
});