如何在HTML5中编写字母数字模式？

Question

我在表格中有一个职称字段，我希望它允许只包含字母和数字的响应，其中至少需要一个字母，并且任何数字都是可选的。我在输入代码中使用了以下模式：

pattern="\w*[a-zA-Z]\w*"

此模式在我尝试使用的RegEx测试仪上进行检查，但是当我以“ Manager 2”的形式提供答案时，它不会让我继续。浏览器如何解释

Answer 1

如果在表单上使用pattern attribute，则暗示^和$会与整个值匹配。您的模式\w*[a-zA-Z]\w*至少匹配一个字符a-z，但不匹配空格。

如果您想匹配Manager 2，则可以使用模式，然后使用一组重复0+次以匹配空格和1+个单词字符的组。

\w*[a-zA-Z]\w*(?: \w+)*

查看regex demo

请注意，\w也与下划线匹配。

更宽泛的模式以允许多个空格，并且在末尾：

^\w*[a-zA-Z][ \w]*

Regex demo

Answer 2

您的原始表情很好，并且缺少空格。在这里，我们可以从一个简单的模式开始，也许类似于：

[A-Za-z\s0-9]+

如有必要，我们可以在其周围添加捕获组以将数据保存在$1中：

([A-Za-z\s0-9]+)

RegEx

如果不需要此表达式，可以在regex101.com中对其进行修改或更改。

RegEx电路

jex.im可视化正则表达式：

演示

const regex = /([A-Za-z\s0-9]+)/gm;
const str = `Manager 2`;
let m;

while ((m = regex.exec(str)) !== null) {
    // This is necessary to avoid infinite loops with zero-width matches
    if (m.index === regex.lastIndex) {
        regex.lastIndex++;
    }
    
    // The result can be accessed through the `m`-variable.
    m.forEach((match, groupIndex) => {
        console.log(`Found match, group ${groupIndex}: ${match}`);
    });
}

DOMO