Vue Ant Design validateFields不起作用

1 篇文章 0 订阅

问题描述:

项目中使用校验方式是自定义校验规则,validateFields 方法不执行,不校验表单项, 然后看了仔细看官方文档

刚开始的理解是,每个函数体中需执行 一下 callBack() ,如图:

这样是不正确的,后来我在方法的最后一行也加了callBack() , 如图:

这样就可以了,所以,必须确保你代码执行的最后一行是 callBack() , 才可以。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
以下是一个使用 Vue2 和 ant design vue 的注册表单示例: ```vue <template> <a-form :form="form" @submit="handleSubmit"> <a-form-item label="用户名" :has-feedback="true" :validate-status="form.getFieldError('username') ? 'error' : ''"> <a-input v-decorator="['username', { rules: [{ required: true, message: '请输入用户名' }] }]" placeholder="请输入用户名" /> </a-form-item> <a-form-item label="密码" :has-feedback="true" :validate-status="form.getFieldError('password') ? 'error' : ''"> <a-input v-decorator="['password', { rules: [{ required: true, message: '请输入密码' }] }]" type="password" placeholder="请输入密码" /> </a-form-item> <a-form-item> <a-button type="primary" html-type="submit">注册</a-button> </a-form-item> </a-form> </template> <script> import { FormModel, Input, Button } from 'ant-design-vue'; export default { name: 'RegisterForm', components: { 'a-form': FormModel, 'a-form-item': FormModel.Item, 'a-input': Input, 'a-button': Button }, data() { return { form: this.$form.createForm(this) }; }, methods: { handleSubmit(e) { e.preventDefault(); this.form.validateFields((err, values) => { if (!err) { console.log('Received values of form: ', values); } }); } } }; </script> ``` 在这个示例中,我们使用了 ant design vue 的 `FormModel`、`Input`、`Button` 组件,并且使用了 Vue2 的模板语法来构建表单。在 `v-decorator` 中,我们定义了表单项的验证规则,通过 `handleSubmit` 方法来提交表单,并在控制台上输出表单值。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值