antd 表单的校验方式antd-design-vue form表单验证,禁止输入中文,只数字,等验证要怎么写呀~~以下是一段手机号的的自定义校验，在提交表单的时候form.validateFields总是出现错误，方法无法向下执行Vue+Antd表单校验form.validateFields执行错误的解决方法

antd 表单的两种校验方式

1.声明式表单验证：

2. validator自定义式验证：

antd-design-vue form表单验证,禁止输入中文,只数字,等验证要怎么写呀~~

因为是在表单里写的,所以有点迷,不知道要怎么写..
请大神给个思路~~~

<a-form-item v-bind="formStyle" label="别名(英文)">
    <a-input
        placeholder="请输入别名"
        v-decorator="['menuPath', { rules: [
            { required: true, message: '请输入别名' },
            { validator: (rule, value, cb) => this.changeKey(rule, value, cb) }
        ] }]"
    />
</a-form-item>

把采纳给了楼下
我现在的解决办法如下: 感觉这样更方便点儿

 <a-form-item v-bind="formStyle" label="别名(英文)">
    <a-input
        placeholder="请输入别名"
        maxlength="50"
        minlength="3"
        v-decorator="['menuPath', { rules: [
            { required: true, message: '请输入别名' }
        ],
            getValueFromEvent: (event) => {
                return event.target.value.replace(/[u4E00-u9FA5]/g,'')
            }
         }]"
    />
</a-form-item>

相关代码

// 只列举一个表单项，其他的规则都是必填。

<a-form :form="form" @submit="handleSubmit" layout="vertical">
  <a-form-item
    label="标题"
    :labelCol="formItemLayout.labelCol"
    :wrapperCol="formItemLayout.wrapperCol">
      <a-input
        v-decorator="[
          'title',
          {initialValue: formData.title, rules: [{ required: true, message: '请输入标题' }]}
        ]"
        placeholder="标题" />
  </a-form-item>
</a-form>

// 提交

async handleSubmit (e) {
  event.preventDefault()
  this.form.validateFields((err, values) => {
    if (!err) {
      Object.assign(this.formData, values)
      Object.assign(this.formData, { updatedAt: Date.now() })
      console.log('提交信息成功', this.formData)
    }
  })
  if (this.formData.id) {
    const res = await updateBanner(this.formData)
    console.log('编辑', res)
  } else {
    const res = await createBanner(this.formData)
    console.log('新增', res)
  }
},

以下是一段手机号的的自定义校验，在提交表单的时候form.validateFields总是出现错误，方法无法向下执行Vue+Antd表单校验form.validateFields执行错误的解决方法

在自定义校验里面每一个判断都要调用callback()，要保证方法最后执行到的永远都是callback()

//自定义校验（检查手机号是否输入正确）
checkPhone(rule, value, callback) {
  if (value != null && value != "") {
    var reg = /^1[3456789]d{9}$/;
    if (!reg.test(value)) callback(new Error("手机号格式不正确"));
    //调用callback
    else callback();
  } else {
    callback();
  }
}
 

最后

以上就是害羞羽毛为你收集整理的antd 表单的校验方式antd-design-vue form表单验证,禁止输入中文,只数字,等验证要怎么写呀~~以下是一段手机号的的自定义校验，在提交表单的时候form.validateFields总是出现错误，方法无法向下执行Vue+Antd表单校验form.validateFields执行错误的解决方法的全部内容，希望文章能够帮你解决antd 表单的校验方式antd-design-vue form表单验证,禁止输入中文,只数字,等验证要怎么写呀~~以下是一段手机号的的自定义校验，在提交表单的时候form.validateFields总是出现错误，方法无法向下执行Vue+Antd表单校验form.validateFields执行错误的解决方法所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。