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

form表單的使用

form表單之獲取表單的數據

創建表單

通過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 } })
  }
}

————————————————
版權聲明：本文爲CSDN博主「別樣紅。」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_44051815/article/details/88305722