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

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>

  <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+$/

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

<form>

  <button>submit</button>

  <input pattern="\w+">

</form>