antd form rules字数限制_【React】antd的form表单的自定义校验规则的用法

在用到antd的Form组件的时候，可能会用到自定义的规则，以我的项目为例：在输入名称的时候需要请求接口，校验的内容是后台返回的内容，所以这个时候需要用到自定义的校验规则

屏幕快照 2019-06-18 下午11.18.29.png

关于自定义校验方法：antd官网提供了方法validator，如下：函数由3个参数组成，rule是规则，value是你输入的值，callback是个回调函数

屏幕快照 2019-06-18 下午11.26.10.png

那么具体的写法如下：将validator放在rules的数组中

{ getFieldDecorator(field, { rules:[{ required:required, message: requiredMsg, },{ validator: this.validateServiceName }], })( ) } ;

调用的方法如下：当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() //在这里也要写个callback }else{ callback(res.data.responseMsg) } }) }

注意⚠️：不管你callback返回不返回提示的内容，都要写callback这个函数，不返回内容写个空的callback()，如果不写的话，在form表单中用this.save.props.form.validateFields校验是进不来if(!err)这个判断中的

this.save.props.form.validateFields((err, values)=>{ if(!err){ //如果上面在请求成功后不写callback()那么是进不来这个判断中的 } })

具体可以参考GitHub上的这篇文档：https://github.com/ant-design/ant-design/issues/5155

antd form rules字数限制_【React】antd的form表单的自定义校验规则的用法相关推荐

[React 基础系列] 受控表单 vs 不受控表单
[React 基础系列] 受控表单 vs 不受控表单受控表单 refs 不受控表单不受控组件总结之前的学习部分带了一些表单内容的使用--之前的案例基本上是用的都是 input,接下来就学习一下 ...
form表单输入正则校验
form表单输入正则校验 <el-formslot="dialog-content"class="dialogContent":model="u ...
Python Flask学习_使用Flask-wtf和web表单
HTML中的<form> 元素表示表单,表单用于收集用户输入. 之前,学习使用request.form获取表单数据.但是有些任务重复单调,可以实现自动化管理,比如 :生成表单的HTML代码 ...
vue3 antd项目实战——Form表单的提交与校验【v-model双向绑定input输入框、form表单数据，动态校验规则】
vue3 ant design vue项目实战--Form表单[v-model双向绑定数据实现form表单数据的提交] 上期文章回顾[UI界面渲染] 场景复现(源代码附在文章最后) 实现需求 1.表单 ...
微信提示在客户端提交验证_微信小程序之表单验证
1 /**2 * 表单验证3 *4 * @param {Object} rules 验证字段的规则5 * @param {Object} messages 验证字段的提示信息6 *7 */ 8 cla ...
asp.NET去掉form的runat=server照样使用服务器控件，包括表单的服务器控件
前两天看了朋友的一网站,发现没有如何垃圾代码,连<div class="aspNetHidden">这个也没有,当时就问了下他是怎么做的,结果告诉我把form的runa ...
react学习笔记(9)表单控件
1.表单控件的操作 1.数据双向绑定 demo1: 在输入框中输入或者删除数据时,可以实时监控. class App extends React.Component {state = {val : & ...
uniapp uview 框架的form表单，输入校验手机号、校验微信号
效果代码实现 <u-form :model="form" ref="form"><u-form-item label-width=" ...
uniapp form表单validator函数校验
尝试了用uniapp的from以及uni-forms发现并不是特别好用,就在插件市场找了一个类似于element-ui的表单验证组件,用法基本上和element-ui一致,使用也比较方便因为目前是用 ...

antd form rules字数限制_【React】antd的form表单的自定义校验规则的用法

antd form rules字数限制_【React】antd的form表单的自定义校验规则的用法相关推荐

最新文章

热门文章