ant-desigin-vue中form表单的使用

form表单的使用

form表单之获取表单的数据

创建表单

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

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: '设置值'
 })

给表单中添加自定义校验

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

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

// 校验事件
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 } })
  }
},