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

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

它没有改变任何东西。

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>
)}

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

Yup schema: How to add new line in error message

javascript

typescript

reactjs

yup

react-hook-form

现场演示