javascript - 是的架构：如何在错误消息中添加新行

Question

matches(
  /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/,
  `Must contain 8 characters, At least one (1) uppercase, one (1) lowercase, one (1) Number and one special case character`
)

和

matches(
  /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/,
  `Must contain 8 characters,\n At least one (1) uppercase, one (1) lowercase, one (1) Number\n and one special case character`
)

如何在匹配错误消息上设置新行？

因为我已经尝试过了\n，<br/>但它不起作用。

我想做的是这样的：

Must contain 8 characters,
At least one (1) uppercase, one (1) lowercase, one (1) Number 
and one special case character

输出应该是这样的^

但在我这边，它将设置新行。输出是这样的：

Must contain 8 characters, At least one (1) uppercase, one (1) lowercase, one (1) Number and one special case character

它不会改变任何东西。

标签： javascriptreactjstypescriptreact-hook-formyup

Answer 1

设置white-space: pre-wrap将使换行符或换行符断开<br/>：

.matches(
  /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/,
  `Must contain 8 characters,\n At least one (1) uppercase, one (1) lowercase, one (1) Number\n and one special case character`
),

{errors.firstName && (
  <div style={{ color: "red", whiteSpace: "pre-wrap" }}>
    {errors.firstName.message}
  </div>
)}

现场演示