2021-05-06 antd中的Form表单异步验证

最新推荐文章于 2022-05-07 12:50:44 发布

zewen_li

最新推荐文章于 2022-05-07 12:50:44 发布

阅读量2.4k

点赞数 1

分类专栏： antd 笔记文章标签： javascript reactjs 前端

本文链接：https://blog.csdn.net/zewen_li/article/details/116449205

版权

本文探讨了在antd库中如何实现Form表单的异步验证。通过利用Form组件的asyncValidate功能，可以有效地校验用户输入的数据，确保在提交前数据的正确性和完整性。

摘要由CSDN通过智能技术生成

antd中的Form表单异步验证：

<Form.Item
    rules:[
        {
            // 普通验证
            required:true,    
            message:'该字段是必须的' 
        },
        {
            // 自定义验证  rule是规则对象，包含字段名称，以及字段类型校验器等等，val为输入框内容
            validator函数接收promise作为返回值
            validator：(rule,val){
                if(...){
                     return Promise.resolve() // 不触发验证
                }else{
                    return Promise.reject(new Error('提示信息')) // 触发验证
                }
            }                                                    
        },
        {
            // 异步验证 多了一个callback函数
            validator：(rule,val,callback){
                这里进行异步操作,下面以promise举例
                const p1 = new Promise((resolve,reject)=>{
                    setTimeOut(()=>{
                        const dataNum=Date.now()
                        if(dataNum%2===0){