验证表单字段输入是否采用标题大小写格式

Question

我正在尝试使用正则表达式为以下模式进行输入：

• 强制以大写字母开头第一个字符
• 强制其他单词（字母）的第一个字符大写
• 强制单词中的所有其他字母小写
• 除了单词的第一个字符外，允许在任何地方使用数字和特殊字符

<input type="text" name="display_name" placeholder="Display Name" id="display_name" required minlength="1" maxlength="32" 
pattern="[A-Z].{1,1}[a-z1-9\W_]).{,}[ ]{,}[A-Z].{1,1}[a-z1-9\W_]).{,}[ ]{,}[A-Z].{1,1}[a-z1-9\W_]).{,}[ ]{,}">

另外，如果你可以做到这个模式，我也可以得到相同的模式用于 php pregreplace。

Answer 1

关于您尝试的正则表达式的一些注释，可能不会达到预期的结果：

• 这部分

  .{1,1}

  和只写一样

  .

• 由于范围为 1-9，这部分

  [a-z1-9\W_]

  不会匹配数字零，并且

  \W

  也可能匹配换行符
• 这部分

  .{,}

  由于点而匹配任何字符，然后按字面意思匹配

  {,}

使用 PHP 时，您可以使用：

^[A-Z][^A-Z\s]*(?:\h+[A-Z][^A-Z\s]*)*$

部分匹配的正则表达式：

• ^

  字符串开头

• [A-Z]

  匹配大写字符 A-Z

• [^A-Z\s]*

  匹配除大写字符 A-Z 或空白字符之外的任何字符 0 次以上

• (?:

  非捕获组作为整体部分重复

  • \h+

    匹配 1 个以上水平空白字符

  • [A-Z][^A-Z\s]*

    匹配字符 A-Z 和 0+ 次任何字符（大写字符 A-Z 或空白字符除外）

• )*

  关闭非捕获组并可选择重复

• $

  字符串结束

查看 regex 演示 和 PHP 演示

对于 Javascript，您可以将正则表达式稍微更改为：

^[A-Z][^A-Z\s]*(?:[^\S\n]+[A-Z][^A-Z\s]*)*$

查看另一个 正则表达式演示

const strings = [
  "A", "Ab", "Abc Def", "Ab A", "Test", "This", "This Is", "This Is A", "T_his I234s A#$%", "Real Name", "test", "TesT", "TeSt", "This is ", "This Is a"
];

const regex = /^[A-Z][^A-Z\s]*(?:\s+[A-Z][^A-Z\s]*)*$/m;

strings.forEach(s => {
  console.log(`${s} => ${regex.test(s) ? "Match" : "No Match"}`);
});

Answer 2

正如评论中指出的，旧的正则表达式存在一些问题。所以，你可以尝试这个新的正则表达式。

/^[A-Z](?:[a-z0-9\W_]+)(?:\s+[A-Z](?:[a-z0-9\W_]+(?=[A-Z]|\s|$))*)$/

这是一个显示一些测试用例的小提琴。

这是可以使用此正则表达式的 PHP。

$input = "YourInputStringHere";

$pattern = '/^[A-Z](?:[a-z0-9\W_]+)(?:\s+[A-Z](?:[a-z0-9\W_]+(?=[A-Z]|\s|$))*)$/';

if (preg_match($pattern, $input)) {
    echo "Valid input!";
} else {
    echo "Invalid input!";
}

如果你想将其转换为函数，请尝试以下操作：

function isValidName($name) {
    if ($name !== null && $name !== '') {
        $pattern = '/^[A-Z](?:[a-z0-9\W_]+)(?:\s+[A-Z](?:[a-z0-9\W_]+(?=[A-Z]|\s|$))*)$/';
        return preg_match($pattern, $name);
    }
    return false;
}

并且，如果您想使用 Javascript 强制输入遵循正则表达式，您可以尝试以下操作：

document.getElementById('display_name').addEventListener('input', function() {
    // This will convert all letters to lowercase except the first letter of word.
    this.value = this.value.toLowerCase().replace(/\b\w/g, function (char) {
        return char.toUpperCase();
    });
});

而

error_message

只是一个跨度。另外，在这个 Javascript 之后，我认为您在输入中不需要

pattern

的东西。因此，如果您使用此 Javascript，您可以从输入中删除

pattern

。

希望这有帮助。