這篇文章主要為大家展示了“React中如何使用async validator進行表單驗證”,內容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領大家一起研究并學習一下“React中如何使用async validator進行表單驗證”這篇文章吧。
創新互聯建站專注為客戶提供全方位的互聯網綜合服務,包含不限于成都網站設計、網站建設、外貿網站建設、玉田網絡推廣、微信小程序開發、玉田網絡營銷、玉田企業策劃、玉田品牌公關、搜索引擎seo、人物專訪、企業宣傳片、企業代運營等,從售前售中售后,我們都將竭誠為您服務,您的肯定,是我們最大的嘉獎;創新互聯建站為所有大學生創業者提供玉田建站搭建服務,24小時服務熱線:028-86922220,官方網址:m.newbst.com
react中進行表單驗證毫無疑問是繁瑣的,尤其對于動態添加或刪除的表單,其驗證邏輯更為復雜, 目前UI框架使用material ui ,但其表單處理不太理想,而后研究了一下另一個UI 框架 ant design, 其對表單的處理大大方便了邏輯的編寫, 它使用async-validator處理驗證邏輯
目前更換框架毫無疑問是不現實的,于是就想直接引入async-validator,下面描述一個簡單的使用,具體信息可以去github上查看
validate.js
import Schema from 'async-validator'; /* * @params form: { * descriptor: 驗證規則 * source: 待驗證字段 * callback: 異步驗證回調函數 * } * * @return errInfo { * isAllValid: 驗證是否通過 * errors: 驗證失敗的字段信息 * } * 不管驗證結果成功還是失敗,都會將結果信息寫入errors中,方便調用者直接通過數組下標方式獲取驗證結果信息 * */ function validate (form) { let errInfo = {}; let errStatus = []; let descriptor = form.descriptor; let validator = new Schema(descriptor); validator.validate(form.source, { firstFields: true // 如果一個字段對應多個驗證規則, 只顯示驗證失敗的第一個規則信息,并不再進行后續規則的驗證 }, (errors, fields) => { if (errors) { /* 如需異步驗證需要傳入回調函數callback */ errors.forEach(item => { errStatus.push(item.message.errStatus); }); errInfo.errors = errors; errInfo.isAllValid = !errStatus.includes(true); form.callback && form.callback(errInfo); } }); return errInfo; }export default validate;
Form.js
/** * Created by wxw on 18-4-26. */ import React from 'react'; import {inject} from 'mobx-react'; import { withStyles } from 'material-ui/styles'; import validate from '../utils/validate'; import {formTest2} from '../utils/validateRules'; import Input, { InputLabel } from 'material-ui/Input'; import { FormControl, FormHelperText } from 'material-ui/Form'; import { MenuItem } from 'material-ui/Menu'; import Select from 'material-ui/Select'; import Button from 'material-ui/Button'; const styles = theme => ({ container: { display: 'flex', flexWrap: 'wrap', }, formControl: { margin: theme.spacing.unit, }, button: { margin: theme.spacing.unit, color: '#fff' }, }); @inject('rootStore') @withStyles(styles) class FormTest2 extends React.Component { state = { name: { value: '', errStatus: false, errMsg: '請輸入name' }, age: { value: '', errStatus: false, errMsg: '請選擇age' } }; handleChange =(field) => event => { if (field === 'name') { this.setState({ name: Object.assign(this.state.name, {value: event.target.value}) }); } else if (field === 'age') { this.setState({ age: Object.assign(this.state.age, {value: event.target.value}) }); } }; handleCheck = (field) => () => { if (field === 'name') { let errInfo = validate({ descriptor: formTest2, source: { name: this.state.name.value, } }); this.setState({ name: errInfo.errors[0].message}); } else if (field === 'age') { let errInfo = validate({ descriptor: formTest2, source: { age: this.state.age.value, } }); this.setState({ age: errInfo.errors[1].message }); } }; handleSubmit = () => { let {name, age} = this.state; let errInfo = validate({ descriptor: formTest2, source: { name: name.value, age: age.value } }); errInfo.errors.forEach(item => { this.setState({ [item.field]: item.message }); }); if (errInfo.isAllValid) { console.log('驗證成功'); } else { console.log('驗證失敗'); } }; render () { const { classes } = this.props; const {name, age} = this.state; return ( <div className="form2"> <FormControl className={classes.formControl} error={name.errStatus}> <InputLabel htmlFor="name-simple">Name</InputLabel> <Input id="name-simple" value={name.value} onChange={this.handleChange('name')} placeholder="placeholder" onBlur={this.handleCheck('name')} /> <FormHelperText id="name-simple">{name.errMsg}</FormHelperText> </FormControl> <FormControl className={classes.formControl} error={age.errStatus}> <InputLabel htmlFor="age-simple">Age</InputLabel> <Select value={age.value} onChange={this.handleChange('age')} onBlur={this.handleCheck('age')} inputProps={{ name: 'age', id: 'age-simple', }} > <MenuItem value={10}>Ten</MenuItem> <MenuItem value={20}>Twenty</MenuItem> <MenuItem value={30}>Thirty</MenuItem> </Select> <FormHelperText id="age-simple">{age.errMsg}</FormHelperText> </FormControl> <Button variant="raised" color="primary" className={classes.button} onClick={this.handleSubmit}> 提交 </Button> </div> ) } }
export default FormTest2;
validateRules.js /** * Created by wxw on 18-4-26. */ export const formTest2 = { name: { validator(rule, value, callback, source, options) { /* callback必須執行一次,帶參數為錯誤信息,不帶參數為正確 */ if (value) { callback({ errMsg: "請輸入name", value, errStatus: false }); } else { callback({ errMsg: "name不能為空", value, errStatus: true }); } } }, age: { validator(rule, value, callback, source, options) { /* callback必須執行一次,帶參數為錯誤信息,不帶參數為正確 */ if (value) { callback({ errMsg: "請選擇age", value, errStatus: false }); } else { callback({ errMsg: "必選項", value, errStatus: true }); } } }, };
綜上為一個小demo,在此基礎上可以進行更深層次的封裝以便使用。
以上是“React中如何使用async validator進行表單驗證”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注創新互聯行業資訊頻道!
網站題目:React中如何使用asyncvalidator進行表單驗證
文章URL:http://m.newbst.com/article48/iigchp.html
成都網站建設公司_創新互聯,為您提供云服務器、面包屑導航、自適應網站、虛擬主機、移動網站建設、App開發
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯