Html 如何在textarea中验证模式匹配？

当我在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>');
});

​
jQuery（'#test'）.on（'keyup'，function（））{
jQuery（this.parent（）.append（“”+this.checkValidity（）+”）+
this.validity.patternmatch+'
'）；
});

HTML5

元素不支持

模式

属性

有关允许的

属性，请参阅

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

---

或者按照传统的HTML4实践定义JavaScript/jQuery函数来实现这一点。

您可以使用

setCustomValidity（）

自己实现这一点。 这样，

This.checkValidity（）

将回复您想要应用于元素的任何规则。 我不认为

这个.validity.patternmatch

可以手动设置，但如果需要，您可以使用自己的属性

---

这将在DOM中的所有文本区域上启用

模式

属性，并触发Html5验证。它还考虑具有

^

或

$

运算符的模式，并使用

g

Regex标志进行全局匹配：

$( 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" );
                }
            }
        }

    });
});

---

看起来，浏览器很可能会忽略它。但我已经用了很多年了，效果很好。这是一个很好的答案，谢谢你的帮助。它帮了我的忙！谢谢，很高兴我能帮忙。：）是的，那更干净。：）实际上，输入中的pattern属性允许regexp中的

^

和

$

，即使它们是隐式的。它应该是一个全局（带/g）regexp（带斜杠），而不是字符串中的regexp:

var patternRegex=new regexp（“^”+pattern.replace（/^\^\$/g）”）+“$”，“g”）我试图让它在小提琴上工作，在每一行上寻找一个电子邮件地址。我所能做的最好是添加一个m修饰符，然后它将匹配任何一行上的电子邮件地址。还是不是我想要的。上面Yann的第一个例子是正确的。您将如何使用此方法来解决问题？这是我创建的小提琴：@YannDìnendal完全同意，我相应地修改了代码@BrianLayman您当然可以使用
m
多行自定义您的标志，但这也可以通过利用符号编写正则表达式来实现。似乎使用HTML实体是一种解决方法。使用
[^&apos；“]
代替
[^'”
。
$( 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" );
                }
            }
        }

    });
});