【React全家桶入门之四】加入表单验证

我们的现在可以在应用里添加用户了。但是还存在不小的问题：

• 用户可以输入任意长的名字
• 用户可以输入任意的年龄
• 用户可以不选择性别

盲目信任用户输入的数据，会给系统埋下不小的隐患。这回我们就来把这隐患扼杀在摇篮之中。

表单验证无非就是对用户输入的数据进行有效性、非空性验证，验证失败会在相应的地方显示错误信息，并阻止用户提交表单。

我们需要记录每一个字段当前的有效状态，有效时隐藏错误信息，无效时显示错误信息。

而这个有效/无效，可以在表单值改变的时候进行判断。

我们对/src/pages/UserAdd.js进行修改：

首先修改了state的结构，把每个表单的值都放到了一个form字段中，方便统一管理；然后每个表单的值都变为了一个包含valid和value还有error字段的对象，valid表示该值的有效状态，value表示该表单具体的值，error表示错误提示信息：

  ...  constructor () {    super();    this.state = {      form: {        name: {          valid: false,          value: '',          error: ''        },        age: {          valid: false,          value: 0,          error: ''        },        gender: {          valid: false,          value: '',          error: ''        }      }    };  }  ...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

在handleValueChange方法中，根据参数field获取state中对应表单的对象，然后根据新的值value判断新的值是否有效，将新的值和新的有效状态更新到state里。

  ...  handleValueChange (field, value, type = 'string') {    if (type === 'number') {      value = +value;    }    const {form} = this.state;    const newFieldObj = {value, valid: true, error: ''};    switch (field) {      case 'name': {        if (value.length >= 5) {          newFieldObj.error = '用户名最多4个字符';          newFieldObj.valid = false;        } else if (value.length === 0) {          newFieldObj.error = '请输入用户名';          newFieldObj.valid = false;        }        break;      }      case 'age': {        if (value > 100 || value <= 0) {          newFieldObj.error = '请输入1~100之间的数字';          newFieldObj.valid = false;        }        break;      }      case 'gender': {        if (!value) {          newFieldObj.error = '请选择性别';          newFieldObj.valid = false;        }        break;      }    }    this.setState({      form: {        ...form,        [field]: newFieldObj      }    });  }  ...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

在handleSubmit方法中对每个字段的valid进行检测，如果有一个valid为false则直接return以中断提交操作。

  ...  handleSubmit (e) {    e.preventDefault();    const {form: {name, age, gender}} = this.state;    if (!name.valid || !age.valid || !gender.valid) {      alert('请填写正确的信息后重试');      return;    }    fetch('http://localhost:3000/user', {      method: 'post',      body: JSON.stringify({        name: name.value,        age: age.value,        gender: gender.value      }),      headers: {        'Content-Type': 'application/json'      }    })      .then((res) => res.json())      .then((res) => {        if (res.id) {          alert('添加用户成功');        } else {          alert('添加失败');        }      })      .catch((err) => console.error(err));  }  ...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

最后，也要对render方法进行更新：

  render () {    const {form: {name, age, gender}} = this.state;    return (      <div>        <header>          <h1>添加用户</h1>        </header>        <main>          <form onSubmit={(e) => this.handleSubmit(e)}>            <label>用户名：</label>            <input              type="text"              value={name.value}              onChange={(e) => this.handleValueChange('name', e.target.value)}            />            {!name.valid && <span>{name.error}</span>}            <br/>            <label>年龄：</label>            <input              type="number"              value={age.value || ''}              onChange={(e) => this.handleValueChange('age', e.target.value, 'number')}            />            {!age.valid && <span>{age.error}</span>}            <br/>            <label>性别：</label>            <select              value={gender.value}              onChange={(e) => this.handleValueChange('gender', e.target.value)}            >              <option value="">请选择</option>              <option value="male">男</option>              <option value="female">女</option>            </select>            {!gender.valid && <span>{gender.error}</span>}            <br/>            <br/>            <input type="submit" value="提交"/>          </form>        </main>      </div>    );  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

来看一下最终效果： 

基本的表单验证就完成了！