react+antd:Form表单校验不提示错误信息

  • Z时代
  • 2024-01-10
  • 分类：综合

react

使用antd做表单的小伙伴一定经常会用到getFieldDecorator

<FormItem label="用户名">
   {
     getFieldDecorator('userName', {
        rules: [{
                   required: true,
                   message: '用户名不能为空'
               }]
     })(
        <Input 
             placeholder="请输入" />
       )
     }
</FormItem>

期望出现这样的结果：

大多数人在使用form时会遇到 明明用户名为空，却不会提示错误信息的问题

这是因为getFieldDecorator的功能是用于和表单进行双向绑定，validateFields才是校验error的方法

在Modal确认按钮的方法中加入validateFields校验：

handleOk = () => {
     const { form: { validateFields } } = this.props; //引入validateFields方法
     validateFields(['userName'],(err, values) => {
         if (err) return;
         this.handleAdd(values);  //若无error则继续进行表单提交
     });
}

其中[ 'userName' ]中的userName为getFieldDecorator中定义的id，也就是你想要校验的模块。

同时校验多个[ 'userName', 'password' ]

若不写则校验所有模块

（注意：校验必须在Form.create之后）

以上是 react+antd:Form表单校验不提示错误信息 的全部内容， 来源链接： utcz.com/z/384149.html

回到顶部