Vue+Ant Design表单验证

Posted 2023-04-12

参考技术A

1.Form
使用
注意：这个（<a-form-item>）必须是需要的否则不行，:form="form"也必须要才行

表单验证

表单赋值

赋值的时候需要调用setFieldsValue才能改变表单控件的值。
2 FormModel 表单
功能同上，支持v-model

使用

表单验证
表单验证a-form-model增加rules，再每个表单增加ref和prop就可以了，rules这个是对象，所以的验证规则都可以写在里面，一个表单项也可以有多个验证规则。

表单赋值

表单赋值这个由于是双向绑定，所以直接赋值即可

3 总结

Form和FormModel都具有数据收集、校验和提交功能，区别就在于是否支持双向绑定式的校验功能，如果使用FormModel，Ant Design版本需要1.5.0+。

ant design vue中点击编辑,表单数据的绑定

在一般的表单中，都是使用v-model来双向绑定数据，但是ant design vue中则会给予警告

1，获取数据：

 getNews({
          params: {
            Id: i   //传进来的id等值，具体看后端要什么
          }
        }).then(res => {
          console.log(res)
          if (res.code == 0) {
            this.form.setFieldsValue({
              title: res.data.title,
              introduce: res.data.introduce
            })
          }
        })

2.布局

 <a-form :form="form" @submit="handleOk" >
         <a-form-item label="联系人电话" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input
              v-decorator="[‘linkphone‘, {rules: [{pattern:new RegExp(/^1[3|4|5|6|7|8|9]d{9}$/,‘g‘),message: ‘请输入正确的手机号码‘},{required: true, message: ‘请输入联系人电话‘}]}]"
              placeholder="请输入联系人电话"
            />
          </a-form-item>
 <a-form >
<-此处可以添加正则验证->

3.提交数据

 handleOk(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        console.log(values)
          editNews({
            action: ‘update‘,
            title: values.title,
            introduce: values.introduce
          }).then(res => {
            console.log(res)
            if (res.code == 0) {
              this.$message.success(‘当前已经成功修改/修改‘)
              this.getNewslist()
            }
          })
       
      })
    }

以上就是from表单中绑定和提交数据