1.首先v-decorator虽然以V开头但是他并不是vue自定义的组件，他是通过ant-design-vue(蚂蚁金服UI组件库)去获取表单数据时使用v-decorator方式去给每个项注册，这样不仅可以通过组件去拉取表单数据，同时对必填项做**校验 **。

2.使用时要仔细阅读组件库手册，以确保不会出现因为没有注册组件等等基础问题。

附组件库当前form表单链接地址：添加链接描述

3.具体使用

data（）：

 

创建表单

• 通过ant-design-vue去获取表单的数据是使用v-decorator的方式去给每个项去注册，这样才能通过组件去拉取表单的数据，同时对必填项做校验；

<template>

  <a-form @submit="handleOk" :form="form">

    // :form="form" 必须优先注册

    <!-- 客户姓名 -->

    <a-form-item

        :labelCol="labelCol" // 排列样式

        :wrapperCol="wrapperCol"

        label='客户姓名：'

      >

      <a-input

        v-decorator="[

          'name', // 给表单赋值或拉取表单时，该input对应的key

          {rules: [{ required: true, message: '请输入客户名称!' }]}

        ]"

        placeholder="请输入客户名称"/>

    </a-form-item>

  </a-form>

</template>

export default {

  data() {

    return {

      form: this.$form.createForm(this), // 只有这样注册后，才能通过表单拉取数据

    }

  }

}

拉取表单数据的方法

• 通过validateFields的方法，能够校验必填项是否有值，若无，则页面会给出警告！

this.form.validateFields((err, values) => {

  if (err) {

    // 这里做逻辑处理

    console.log(values) // { name: '' }

  }

}

清空表单的方法

• 执行this.form.resetFields()，则会将表单清空。

给表单赋值

• 值得一提的是，setFieldsValue只有通过这种方式给表单赋值，拉取表单的时候才能拉取到值，其他设置默认值的方式，拉取表单时都无法获取到默认值。

 this.form.setFieldsValue({

   name: '设置值'

 })

给表单中添加自定义校验

• 现在给表单添加自定义校验的方式，是从你开始输入时就在校验，讨厌的警告一直存在，直到你输入完整才会消失，个人觉得这种方式不太友好！

<a-form-item

  v-bind="formItemLayout"

  label="E-mail"

>

  <a-input

    v-decorator="[

      'email',

      {

        rules: [{

          type: 'email', message: 'The input is not valid E-mail!',

        }, {

          required: true, message: 'Please input your E-mail!',

        }]

      }

    ]"

  />

</a-form-item>

• 推荐使用下面的方式做自定义校验，当输入框失去焦点后再去校验是否正确
• 这种方法的思路是，
  • 当输入框失去焦点时，校验是否为空同时是否匹配正则
  • 给该单个输入框设置错误信息，并在页面给出警告。

<a-form-item

  :labelCol="labelCol"

  :wrapperCol="wrapperCol"

  label='手机：'

>

<a-input

  type="number"

  v-decorator="[

    'phone',

    {

      rules: [

        { required: false, message: '请输入手机号码!' },]

    },

  ]"

  @blur="validatePhoneBlur"

  placeholder='请输入手机号码' />

</a-form-item>

// 校验事件

validatePhoneBlur(e) {

  const validatePhoneReg = /^1\d{10}$/

  if (e.target.value && !validatePhoneReg.test(e.target.value)) {

    const arr = [{

      message: '您输入的手机格式不正确!',

      field: 'phone',

    }]

    this.form.setFields({ phone: { value: e.target.value, errors: arr } })

  }

},

</article>