我們需要記錄每一個字段當前的有效狀態，有效時隱藏錯誤信息，無效時顯示錯誤信息。

而這個有效/無效，可以在表單值改變的時候進行判斷。

我們對/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><inputtype="text"value={name.value}onChange={(e) => this.handleValueChange('name', e.target.value)}/>{!name.valid && <span>{name.error}</span>}<br/><label>年齡：</label><inputtype="number"value={age.value || ''}onChange={(e) => this.handleValueChange('age', e.target.value, 'number')}/>{!age.valid && <span>{age.error}</span>}<br/><label>性別：</label><selectvalue={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><inputtype="text"value={name.value}onChange={(e) => this.handleValueChange('name', e.target.value)} />{!name.valid && <span>{name.error}</span>}<br /><label>年齡:</label><inputtype="number"value={age.value || ''}onChange={(e) => this.handleValueChange('age', e.target.value, 'number')} />{!age.valid && <span>{age.error}</span>}<br /><label>性別:</label><selectvalue={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;

.

總結

以上是生活随笔為你收集整理的react 项目实战（三）表单验证的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。