我们的现在可以在应用里添加用户了。但是还存在不小的问题:
- 用户可以输入任意长的名字
- 用户可以输入任意的年龄
- 用户可以不选择性别
盲目信任用户输入的数据,会给系统埋下不小的隐患。这回我们就来把这隐患扼杀在摇篮之中。
表单验证无非就是对用户输入的数据进行有效性、非空性验证,验证失败会在相应的地方显示错误信息,并阻止用户提交表单。
我们需要记录每一个字段当前的有效状态,有效时隐藏错误信息,无效时显示错误信息。
而这个有效/无效,可以在表单值改变的时候进行判断。
我们对/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: ''
}
}
};
}
...
在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: '&