下面是简单的一个验证页面,我们需要做的就是在选择一个类目后,去判断数据库中该类目下是否有相同的值。同步验证
validate .js里面可以验证基本的是否为空,字符长短,正则等,异步
asyncValidate.js用于跑后端去从数据库进行验证(
注意:不要害怕,异步验证会不会验证没结束,直接点了保存就提交了。答案是肯定不会的,
所有的保存或点击进入下一个页面,都会先进行异步验证,异步验证没结束,不会进行下一步的操作)
import restClientRemote from '../../../../../restClientRemote';
restClientRemote是封装的fetch的文件,按自己的项目需求去做。主要的就是:
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
let WizardFormFirstPage = props => {
const {handleSubmit,thircate} = props
return (
<form onSubmit={handleSubmit}>
<div style={{marginLeft: "2%", marginBottom: "2%"}}>
<FormTab label="resources.goods.tabs.baseInfo">
<Field
name="thircate"
component={Category}
style={{display: 'inline-block', width: '90%'}}
/>
}
{thircate &&
<TextInput
source="goodstype"
label="商品型号"
style={{display: 'inline-block', width: '90%'}}/>
}
</FormTab >
</div>
<div className="btnbox">
<div className="btnitem">
<div className="btnposition">
<button type="submit" className="btncontent">
<div>
<div className="btncontentbox">
<span className="btncontentboxspan">下一步</span>
</div>
</div>
</button>
</div>
</div>
</div>
</form>
)
}
WizardFormFirstPage = reduxForm({
form: 'wizard',
destroyOnUnmount: false, // <------ preserve form data
forceUnregisterOnUnmount: true,
validate,
asyncValidate,
asyncBlurFields: ['goodstype', 'thircate'],
})(WizardFormFirstPage)
const selector = formValueSelector('wizard')
WizardFormFirstPage = connect(state => {
const {thircate} = selector(state, "thircate")
return {
thircate,
}
})(WizardFormFirstPage)
export default WizardFormFirstPage
其中同步验证代码:
const validate = values => {
const errors = {}
if (!values.thircate) {
errors.thircate = '必填'
}
if (!values.goodstype) {
errors.goodstype = '必填'
} else {
if (values.goodstype.length > 20) {
errors.goodstype = '输入过长!'
}
}
return errors;
}
export default validate
验证异步的代码:
import {GET_MANY} from 'admin-on-rest';
import restClientRemote from '../../../../../restClientRemote';
function asyncValidate(values) {
let type = values.goodstype;
let thircate = values.thircate;
return restClientRemote(GET_MANY, 'goods/JudgeType', {
filter: {
goodstype: type,
thircate: thircate
},
sort: {},
}).then(response => {
if (response.data !== undefined) {
var flag = response.data[0]["flag"];
if (flag) {
throw {goodstype: '同类目下型号重复!'}
}
}
});
}
export default asyncValidate