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

regex验证器电子邮件

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

}

在你的templateResult

中

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

 module.exports = override(
   ...addBabelPresets("@babel/preset-env", "@babel/preset-react"),
   ...addBabelPlugins('@babel/plugin-proposal-class-properties'),
   # other lines omitted for brevity
)

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

5 个答案: