React表单验证相关

记录一种React表单验证的思路。原文参考(English)

表单字段与验证信息分开

就像这样:

1
2
3
4
5
6
7
8
9
10
11
12
13
constructor(props) {
  super(props);
  this.state = {
    fullName: null,
    email: null,
    password: null,
    errors: {
      fullName: '',
      email: '',
      password: '',
    }
  };
}

验证信息和表单字段一一对应

每个字段验证错误信息只有一条

比如,fullName的验证提示应该是“2~4个中文”,而不应该分成两个:“至少两个字”、“最多4个字”

显示验证错误信息

验证可能需要3种信息展示:

  1. 默认时的提示文本
  2. 验证没通过时的错误提示
  3. 验证通过后的正确提示

这些可以通过判断errors里的字段按条件展示。拿 errors.fullName 举例:

  1. errors.fullName为空,显示默认信息
  2. errors.fullName为字符串,显示其内容(未通过提示)
  3. errors.fullName===true,显示验证通过信息

这样,在表单提交时,判断表单各字段是否通过验证,并设置 errors 里面对应的提示信息即可

发表评论

电子邮件地址不会被公开。