如何驗證textarea中的模式匹配？

當我在javascript中使用textarea.checkValidity（）或textarea.validity.valid時，無效值都是那些總是返回true，我做錯了什麼？如何驗證textarea中的模式匹配？

<textarea name="test" pattern="[a-z]{1,30}(,[a-z]{1,30})*" id="test"></textarea> 

jQuery('#test').on('keyup', function() { 
    jQuery(this).parent().append('<p>' + this.checkValidity() + ' ' + 
    this.validity.patternMismatch + '</p>'); 
});

http://jsfiddle.net/Riesling/jbtRU/9/

來源

2012-11-30 Riesling

似乎['textarea'沒有'pattern'屬性（https：//開頭developer.mozilla.org/en-US/docs/HTML/HTML_Elements/textarea?redirectlocale=en-US&redirectslug=HTML%2FElement%2Ftextarea），所以瀏覽器很可能會忽略它。 – Passerby

HTML5 <textarea>元件不支持pattern屬性。

查看MDN doc允許的<textarea>屬性。

您可能需要自己定義此功能。

或者按照傳統的HTML 4慣例來定義JavaScript/jQuery函數來執行此操作。

來源

2013-09-07 05:55:33

您可以使用setCustomValidity()自己實現此功能。這樣，this.checkValidity()將回復您想要應用於您的元素的任何規則。我不認爲this.validity.patternMismatch可以手動設置，但如果需要，您可以使用自己的屬性。

http://jsfiddle.net/yanndinendal/jbtRU/22/

$('#test').keyup(validateTextarea); 

function validateTextarea() { 
    var errorMsg = "Please match the format requested."; 
    var textarea = this; 
    var pattern = new RegExp('^' + $(textarea).attr('pattern') + '$'); 
    // check each line of text 
    $.each($(this).val().split("\n"), function() { 
     // check if the line matches the pattern 
     var hasError = !this.match(pattern); 
     if (typeof textarea.setCustomValidity === 'function') { 
      textarea.setCustomValidity(hasError ? errorMsg : ''); 
     } else { 
      // Not supported by the browser, fallback to manual error display... 
      $(textarea).toggleClass('error', !!hasError); 
      $(textarea).toggleClass('ok', !hasError); 
      if (hasError) { 
       $(textarea).attr('title', errorMsg); 
      } else { 
       $(textarea).removeAttr('title'); 
      } 
     } 
     return !hasError; 
    }); 
}

來源

2014-01-23 14:59:00

很好的答案，並感謝小提琴。它幫助我了！ –

謝謝，很高興我能幫上忙。 :) –

這將使上的DOM所有文字區域的pattern屬性並觸發HTML5的驗證。它也考慮到了有^或$運營商賬戶模式和不使用正則表達式g標誌一個全球性的比賽：

$(document).ready(function() { 
    var errorMessage = "Please match the requested format."; 

    $(this).find("textarea").on("input change propertychange", function() { 

     var pattern = $(this).attr("pattern"); 

     if(typeof pattern !== typeof undefined && pattern !== false) 
     { 
      var patternRegex = new RegExp("^" + pattern.replace(/^\^|\$$/g, '') + "$", "g"); 

      hasError = !$(this).val().match(patternRegex); 

      if (typeof this.setCustomValidity === "function") 
      { 
       this.setCustomValidity(hasError ? errorMessage : ""); 
      } 
      else 
      { 
       $(this).toggleClass("error", !!hasError); 
       $(this).toggleClass("ok", !hasError); 

       if (hasError) 
       { 
        $(this).attr("title", errorMessage); 
       } 
       else 
       { 
        $(this).removeAttr("title"); 
       } 
      } 
     } 

    }); 
});

來源

2015-01-30 05:21:56 dwkd

是的，這是更清潔。 :)事實上，輸入中的模式屬性允許在正則表達式中使用'^'和'$'，即使它們是隱含的。 –

^和$ replace不起作用。它應該是一個全局的（帶有/ g）正則表達式（帶有斜槓），而不是字符串中的正則表達式：'var patternRegex = new RegExp（'^'+ pattern.replace（/^\^| \ $$/g，' '）+'$'，'g'）;' –

我試圖讓它在每行上尋找電子郵件地址的小提琴上工作。我可以做的最好的是添加一個m修飾符，然後在任何行上有電子郵件地址的情況下匹配。仍然不是我想要的。 Yann的第一個例子正確地工作。你將如何使用這種方法來解決問題？這裏是我創建的小提琴：http://jsfiddle.net/da1hg19e/ –

如何驗證textarea中的模式匹配？

回答

相關問題