您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“React中如何使用async validator進(jìn)行表單驗(yàn)證”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“React中如何使用async validator進(jìn)行表單驗(yàn)證”這篇文章吧。
react中進(jìn)行表單驗(yàn)證毫無疑問是繁瑣的,尤其對于動(dòng)態(tài)添加或刪除的表單,其驗(yàn)證邏輯更為復(fù)雜, 目前UI框架使用material ui ,但其表單處理不太理想,而后研究了一下另一個(gè)UI 框架 ant design, 其對表單的處理大大方便了邏輯的編寫, 它使用async-validator處理驗(yàn)證邏輯
目前更換框架毫無疑問是不現(xiàn)實(shí)的,于是就想直接引入async-validator,下面描述一個(gè)簡單的使用,具體信息可以去github上查看
validate.js
import Schema from 'async-validator'; /* * @params form: { * descriptor: 驗(yàn)證規(guī)則 * source: 待驗(yàn)證字段 * callback: 異步驗(yàn)證回調(diào)函數(shù) * } * * @return errInfo { * isAllValid: 驗(yàn)證是否通過 * errors: 驗(yàn)證失敗的字段信息 * } * 不管驗(yàn)證結(jié)果成功還是失敗,都會(huì)將結(jié)果信息寫入errors中,方便調(diào)用者直接通過數(shù)組下標(biāo)方式獲取驗(yàn)證結(jié)果信息 * */ function validate (form) { let errInfo = {}; let errStatus = []; let descriptor = form.descriptor; let validator = new Schema(descriptor); validator.validate(form.source, { firstFields: true // 如果一個(gè)字段對應(yīng)多個(gè)驗(yàn)證規(guī)則, 只顯示驗(yàn)證失敗的第一個(gè)規(guī)則信息,并不再進(jìn)行后續(xù)規(guī)則的驗(yàn)證 }, (errors, fields) => { if (errors) { /* 如需異步驗(yàn)證需要傳入回調(diào)函數(shù)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('驗(yàn)證成功'); } else { console.log('驗(yàn)證失敗'); } }; 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必須執(zhí)行一次,帶參數(shù)為錯(cuò)誤信息,不帶參數(shù)為正確 */ if (value) { callback({ errMsg: "請輸入name", value, errStatus: false }); } else { callback({ errMsg: "name不能為空", value, errStatus: true }); } } }, age: { validator(rule, value, callback, source, options) { /* callback必須執(zhí)行一次,帶參數(shù)為錯(cuò)誤信息,不帶參數(shù)為正確 */ if (value) { callback({ errMsg: "請選擇age", value, errStatus: false }); } else { callback({ errMsg: "必選項(xiàng)", value, errStatus: true }); } } }, };
綜上為一個(gè)小demo,在此基礎(chǔ)上可以進(jìn)行更深層次的封裝以便使用。
以上是“React中如何使用async validator進(jìn)行表單驗(yàn)證”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。