在用到 antd 的 Form 组件的时候, 可能会用到自定义的规则, 以我的项目为例: 在输入名称的时候需要请求接口, 校验的内容是后台返回的内容, 所以这个时候需要用到自定义的校验规则
屏幕快照 2019-06-18 下午 11.18.29.PNG
关于自定义校验方法: antd 官网提供了方法 validator, 如下: 函数由 3 个参数组成, rule 是规则, value 是你输入的值, callback 是个回调函数
屏幕快照 2019-06-18 下午 11.26.10.PNG
那么具体的写法如下: 将 validator 放在 rules 的数组中
- <FormItem label={label} {...formItemLayout} key={field}>
- {
- getFieldDecorator(field, {
- rules:[{
- required:required,
- message: requiredMsg,
- },{
- validator: this.validateServiceName
- }],
- })(
- <Input type="text" placeholder='test' />
- )
- }
- </FormItem>;
调用的方法如下: 当 value 在变化的时候请求接口, 通过接口返回的值传给 callback 回调函数
- // 注意: 在这里我只用到了 value 和 callback, 没有自定义 rule
- validateServiceName =(rule, value, callback)=>{
- console.log(value)
- this.setState({
- onlyName: value
- },()=>{
- this.nameChange(callback)
- })
- }
- // 这块是请求接口的方法:
- nameChange =(callback)=> {
- axios.get("/api/credit-serve/serve/checkServeName",
- {params:{serveName: this.state.onlyName}
- }
- )
- .then(res=>{
- if(res.data.responseCode === 0){
- callback()
- }else{
- callback(res.data.responseMsg)
- }
- })
- }
来源: http://www.jianshu.com/p/8a04823ab900