为什么我的正则表达式在客户端上工作而在服务器上失败？

Question

我正在使用一个应该验证用户名的正则表达式。用户名应仅包含英文字母、数字或下划线。客户端代码输入按预期工作，除了字母、数字和下划线外，不允许输入任何内容：

              <input
                type="text"
                name="username"
                id="username"
                required
                minlength="2"
                maxlength="14"
                pattern="[A-Za-z0-9_]+"
                class="form__input"
              />

当我尝试提交包含以下内容的用户名时 !，浏览器验证不允许它发生。

现在，在我的服务器端（Express 应用程序 + 是的）我使用相同的正则表达式，但是，它没有按预期工作：

    const shema = yup.object().shape({
  username: yup
    .string()
    .required()
    .trim()
    .min(2)
    .max(14)
    .matches(/[A-Za-z0-9_]+/, 'Only English letters, numbers, and underscore allowed (2-14 characters)')})

当我使用 Postman 并使用包含的用户名发送 post 请求时!，验证不起作用。所有其他字段都按预期验证，因此，我的正则表达式可能有问题？谢谢你。

Answer 1

在 HTML 中，模式属性隐式地跨越输入值的整个长度——就好像它在每一端都有不可见的^和$s。例如：

<form>
  <button>submit will fail because more than one digit exists in the input</button>
  <input pattern="\d" value="123">
</form>

要使服务器上的模式执行与客户端上执行的相同的逻辑，请使用：

.matches(/^[A-Za-z0-9_]+$/

或者，更好的是使用\w，它匹配字母、数字和_字符：

.matches(/^\w+$/

您也可以在客户端执行此操作：

.matches(/^[A-Za-z0-9_]+$/