javascript - HTML5 自定义模式验证

Question

我正在尝试为字符串开头的 3 个字母、然后是逗号、空格和一些单词的输入创建验证。

例如：Coz，你是天才

我为此目的使用这种模式，也 pattern="^[a-zA-Z]{3}[,]{1}[a-zA-Z]{30}" 尝试过这种模式^[a-zA-Z]{3}[, ][a-zA-Z\s]

下面是我用于自定义验证的 javascript。

    var data = document.getElementById('sentence');
        data.addEventListener('invalid', function (e) {
            //console.log(data.validity);
            if (data.validity.patternMismatch) {
                e.target.setCustomValidity("Please choose from dropdown");
            } else if (!data.validity.valid) {
                e.target.setCustomValidity("This is not a valid sentence");
            }
            data.addEventListener('input', function (e) {
                e.target.setCustomValidity('');
            });
        }, false);

我想我在逗号和空格之后缺少空格模式。

标签： javascriptjqueryhtml

Answer 1

我不认为浏览器的模式属性完全支持正则表达式，但你的正则表达式应该更接近^[A-Za-z]{3},\s(\w+\s?)+.

下面的链接很好地解释了正则表达式，但这里有一个细分。

^[A-Za-z]{3}以 3 个字符开头

,\s后跟一个逗号和一个空格

(\w+\s?)+后面是一组单词，然后是一个可选的空格。just 意味着单词空间组必须出现+一次或多次。

例如

regex101.com/r/HOURbf/1