如何验证文本区域中的模式匹配？

Question

当我在带有无效值的 javascript 中使用 textarea.checkValidity() 或 textarea.validity.valid 时，这两个值总是返回 true，我做错了什么？

 <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/

原文由 Riesling 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

HTML5 <textarea> 元素不支持 pattern 属性。

请参阅 MDN 文档 以了解允许的 <textarea> 属性。

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

或者遵循定义 JavaScript/jQuery 函数的传统 HTML 4 做法来执行此操作。

原文由 Dipesh Shah 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以使用 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;
    });
}

原文由 Yann Dìnendal 发布，翻译遵循 CC BY-SA 3.0 许可协议