Yup校验：如何获取字段值？实现max校验动态显示输入长度

我懂你要做的事——在Yup的name字段验证里，当用户输入超过40字符时，要把实际输入的长度带到错误提示里对吧？之前直接用name.toString().length肯定不行，因为Yup在这个上下文里没法直接访问到输入的变量，得用Yup提供的验证上下文来拿值。

正确的做法是把max方法的错误消息改成一个函数，这个函数会接收到Yup传递的上下文对象，里面就包含当前用户输入的value。你可以从这个对象里取出value，然后获取它的长度传给你的message函数。

修改后的代码如下：

name: yup.string().trim().required(message("nameMissing")).max(40, ({ value }) => 
  message("nameTooLongWithStatus", { length: value?.length || 0 })
),

这里几点说明：

• 用箭头函数替代直接调用message，这样能拿到Yup的验证上下文（里面的value就是用户输入的name内容）
• value?.length || 0是做了个兜底处理，防止value为undefined时出现报错
• 这样当验证触发错误时，message函数就能拿到真实的输入长度，生成你想要的「最大字符数为40（当前长度）」提示

内容的提问来源于stack exchange，提问作者Cristian Nicolae Perjescu