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

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 并使用包含的用户名发送发布请求时!，验证不起作用。所有其他字段均按预期验证，因此，我的正则表达式可能存在问题？谢谢。

Answer 1

在 HTML 中，模式属性隐式地跨越输入值的整个长度- 就好像它的两端都有不可见的^和s 。$例如：<form>&nbsp; <button>submit will fail because more than one digit exists in the input</button>&nbsp; <input pattern="\d" value="123"></form>要使服务器上的模式执行与客户端上执行的逻辑相同的逻辑，请使用：.matches(/^[A-Za-z0-9_]+$/或者，更好的是，使用\w，它匹配字母、数字和_字符：.matches(/^\w+$/您也可以在客户端上执行此操作：<form>&nbsp; <button>submit</button>&nbsp; <input pattern="\w+"></form>