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: ''
}
}
};
}
...
在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 || !value) {
newFieldObj.error = '请输入1~100之间的数字';
newFieldObj.valid = false;
}
break;
}
case 'gender': {
if (!value) {
newFieldObj.error = '请选择性别';
newFieldObj.valid = false;
}
break;
}
default: {
//
}
}
this.setState({
form: {
...form,
[field]: newFieldObj
}
});
}
...
在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));
}
...
最后，也要对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>
);
}
来看一下最终效果：
注：完整代码 src / pages / UserAdd.js
import React from 'react';
// 添加用户组件
class UserAdd extends React.Component {
// 构造器
constructor(props) {
super(props);
// 定义初始化状态
this.state = {
form: {
name: {
valid: false, // 有效状态
value: '', // 表单具体的值
error: '' // 错误提示信息
},
age: {
valid: false,
value: '',
error: ''
},
gender: {
valid: false,
value: '',
error: ''
}
}
};
}
// 输入框改变事件
handleValueChange(field, value, type='string') {
// 由于表单的值都是字符串,我们可以根据传入type为number来手动转换value的类型为number类型
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 || !value){
newFieldObj.error = '请输入1~100之间的数字';
newFieldObj.valid = false;
}
break;
}
case 'gender': {
if(!value){
newFieldObj.error = '请选择性别';
newFieldObj.valid = false;
}
break;
}
default: {
//
}
}
// 设置状态
this.setState({
form: {
...form,
[field]: newFieldObj
}
});
}
// 按钮提交事件
handleSubmit(e){
// 阻止表单submit事件自动跳转页面的动作
e.preventDefault();
// 定义常量
const { form: { name, age, gender }} = this.state;
// 验证
if(!name.valid || !age.valid || !gender.valid){
alert('请填写正确的信息后重试');
return;
}
// 发送请求
fetch('http://localhost:8000/user', {
method: 'post',
// 使用fetch提交的json数据需要使用JSON.stringify转换为字符串
body: JSON.stringify({
name: name.value,
age: age.value,
gender: gender.value
}),
headers: {
'Content-Type': 'application/json'
}
})
// 强制回调的数据格式为json
.then((res) => res.json())
// 成功的回调
.then((res) => {
// 当添加成功时,返回的json对象中应包含一个有效的id字段
// 所以可以使用res.id来判断添加是否成功
if(res.id){
alert('添加用户成功!');
}else{
alert('添加用户失败!');
}
})
// 失败的回调
.catch((err) => console.error(err));
}
render() {
// 定义常量
const {form: {name, age, gender}} = this.state;
return (
<div>
<header>
<div>添加用户</div>
</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>
);
}
}
export default UserAdd;
.
