將select2限制爲只接受電子郵件地址

Question

我有一個select2方塊，我將此限制爲僅接受電子郵件地址。

我試圖通過編寫自定義formatSelection功能要做到這一點，因爲

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

我期待在返回一個空字符串就足以在select2不顯示此輸入，但我得到一個空結果。

Answer 1

從您的問題中不清楚您的數據源在哪裏。如果數據源來自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 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

至於選擇2 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 4

我使用選擇2 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, 
         }; 

} 

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