1. 需求分析

我們要把我們的表單組件分成兩個部分，一個是item部分，一個是整體的 form 部分，form部分由item和button提交按鈕共同組成。

在我們單擊每個輸入框時會觸發(fā)每一個item的驗證規(guī)則，然后點(diǎn)擊登錄按鈕會驗證整個 form 。

2. 表單功能的簡單實現(xiàn)

我們先去 bootstrap 文檔里找到 form 表單然后把它的模板代碼 copy 過來，當(dāng)然前提是我們首先要在項目中安裝 BootStrap。

現(xiàn)在運(yùn)行我們的項目，就能看到 form 表單的樣式了：

首先我們通過 reactive 來綁定每個輸入框需要綁定的數(shù)據(jù)：

const emailRef = reactive({
      val: '',
      error: false,
      message: ''
    })

然后通過 v-model 和我們剛剛定義的數(shù)據(jù)進(jìn)行雙向綁定：

我們又定義了一個 validateEmail 函數(shù)當(dāng)鼠標(biāo)失去焦點(diǎn)時觸發(fā)，我們在這個方法中定義輸入框的驗證標(biāo)準(zhǔn)：

const emailReg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
const validateEmail = () => {
      if (emailRef.val.trim() === '') {
        emailRef.error = true
        emailRef.message = '輸入內(nèi)容不能為空'
      } else if (!emailReg.test(emailRef.val)) {
        emailRef.error = true
        emailRef.message = '輸入郵箱格式不正確'
      } else {
        emailRef.error = false
      }
}

現(xiàn)在當(dāng)我們什么也不輸入時，輸入框效果：

輸入郵箱格式不正確時，輸入框效果：

3. 抽象驗證規(guī)則

剛剛我們完成了郵箱的驗證邏輯，我們還得做密碼框的驗證邏輯，如果我們的表單還有很多功能不一樣的輸入框，那我們得挨個給他們添加驗證功能，這樣就有大量重復(fù)代碼，要寫非常多冗余的變量和函數(shù)，我們作為開發(fā)者最忌諱的就是復(fù)制粘貼做搬運(yùn)工，所以我們就想把這部分的邏輯抽離出去作為一個可復(fù)用的組件

我們輸入框的組件就是圖片中的 validate-input，如果我們只需要在父組件中輸入要驗證的規(guī)則和驗證失敗的信息，把邏輯交給 validate-input 來判斷，那整體代碼就非常清晰了。

我們通過 rules 屬性來傳給組件指定驗證類型。message字段是出現(xiàn)問題時提示的內(nèi)容，因為我們的輸入框組件可以使用不止一種規(guī)則，所以 RulesProp 應(yīng)該是 RuleProp 的數(shù)組。如果以后要添加其他的規(guī)則，就可以直接在下面的 type 中添加，這樣可擴(kuò)展性非常高。

interface RuleProp {
  type: 'required' | 'email';
  message: string;
}
export type RulesProp = RuleProp[]

我們在子組件中定義規(guī)則的接口，然后定義都是這種類型的數(shù)組結(jié)構(gòu)并把它導(dǎo)出出去方便父組件使用。如果不熟習(xí) typescript 的朋友，就可以把它當(dāng)作定義一個RuleProp對象，里面有兩個屬性，一個是規(guī)則類型，一個是出現(xiàn)問題時提示的內(nèi)容。然后再定義一個對象數(shù)組，把它導(dǎo)出出去這樣父組件向子組件傳遞的都是這種規(guī)定的對象數(shù)組。

子組件接受的 props把它斷言成 RulesProp 類型的數(shù)組：

我們再看一下 validate-input 的邏輯部分：

setup (props) {
    const inputRef = reactive({
      val: '',
      error: false,
      message: ''
    })
    const validateInput = () => {
      if (props.rules) {
        const allPassed = props.rules.every(rule => {
          let passed = true
          inputRef.message = rule.message
          switch (rule.type) {
            case 'required':
              passed = (inputRef.val.trim() !== '')
              break
            case 'email':
              passed = emailReg.test(inputRef.val)
              break
            default:
              break
          }
          return passed
        })
        inputRef.error = !allPassed
      }
    }
    return {
      inputRef,
      validateInput
    }
  }

我們先定義一個 inputRef 對象來綁定輸入信息和狀態(tài)。validateInput 當(dāng)輸入框失去焦點(diǎn)的時候觸發(fā)這個驗證函數(shù)。下面我們來看一下這個函數(shù)的實現(xiàn)邏輯：

首先通過一個 if 實現(xiàn)當(dāng)有 props 的時候才做驗證。然后通過數(shù)組的 every 方法來給每一個數(shù)組中的每一個驗證對象做判定，every 方法如果全部為真時才為真，有一個為假就是假。他很符合表單驗證的邏輯，所以最后 every 方法一定會返回 true 或者 false，我們讓一個變量接受它，如果這個變量是真就代表輸入框全部驗證規(guī)則都通過，那么 inputRef 的 error 屬性就是 false，這樣就不會如下的錯誤提示：

<span v-if="inputRef.error" class="invalid-feedback">{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->{inputRef.message}}</span>

在 every 方法中，我們一項一項判斷，先設(shè)置當(dāng)前項返回 true ，然后把當(dāng)前項的 message ，也就是錯誤提示內(nèi)容賦值給 inputRef 的 message，然后通過 switch 來判定當(dāng)前項的狀態(tài)，這樣當(dāng)當(dāng)前項不滿足規(guī)則時，返回的 message 就是當(dāng)前項的 message

如果最后 inputRef.error 是 false，那么就添加 bootstrap 中表單錯誤類，來實現(xiàn)動態(tài)綁定：

<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
      v-model="inputRef.val"
      :class="{'is-invalid':inputRef.error}"
      @blur = "validateInput"
    >

到這里我們就實現(xiàn)了子組件的處理，下面只需要在父組件中把參數(shù)傳過去就行了：

const emailRules: RulesProp = [
  { type: 'required', message: '電子郵箱地址不能為空' },
  { type: 'email', message: '請輸入正確的電子郵箱格式' }
]
const passwordRules: RulesProp = [
  { type: 'required', message: '輸入密碼不能為空' }
]

我們定義兩個 RulesProp 類型的數(shù)組作為參數(shù)，傳遞給子組件：

現(xiàn)在啟動項目，看一下效果：

這樣我們這一節(jié)抽離驗證規(guī)則的目的就達(dá)到了。

4. 支持 v-model 雙向綁定

現(xiàn)在我們已經(jīng)把驗證規(guī)則抽離出來，實現(xiàn)了表單的基本驗證，但是有一個痛點(diǎn)需要我們解決，我們在父組件中現(xiàn)在拿不到用戶在輸入框中輸入的值，這樣就實現(xiàn)不了下一步的其他需求，在 input 中我們通過 v-model 指令來進(jìn)行雙向綁定可以很輕松地獲得用戶輸入的值，那么在 validate-input 組件中我們?nèi)绾蝸韺崿F(xiàn) v-model 呢？

我們先看一下 vue3 中 v-model 的實現(xiàn)原理：

vue3 中摒棄了 vue2 里通過動態(tài)綁定 input 的 value 屬性和 input 事件實現(xiàn)的雙向綁定，通過 modelValue 這么個屬性和 onUpdate:modelValue 這個事件來實現(xiàn)雙向綁定。所以我們要實現(xiàn) v-model 就要有上面的屬性和更新輸入框的時候出發(fā)的事件。

首先我們來寫 validate-input 子組件中的內(nèi)容，在 props 參數(shù)中加入 modelValue：

然后用 :value 和 input 事件把原來 input 中的 v-model 替換一下：

<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
      :value="inputRef.val"
      :class="{'is-invalid':inputRef.error}"
      @blur = "validateInput"
      @input="updateValue"
    >

定義 input 事件，注意提交的事件名為 update:modelValue：

const updateValue = (e: KeyboardEvent) => {
      const targetValue = (e.target as HTMLInputElement).value
      inputRef.val = targetValue
      context.emit('update:modelValue', targetValue)
    }

我們在父組件中使用一下 v-model ，看看效果：

可以看到我們成功實現(xiàn)了 v-model 的雙向綁定：

5. 使用 $attrs 支持默認(rèn)屬性

在原生 input 中有很多屬性，比如 placeholder ，如果我們在我們的輸入框組件中添加這個屬性，會正常顯示在頁面上嗎？我們試一下：

啟動項目，查看效果：

placeholder沒有正常顯示出來，我們查看控制臺，看看哪里有問題：

可以看到我們的placeholder被直接添加到 input 的父級上了，那如何把屬性正確添加在 input 上呢？

1. 首先我們只需要在組件的選項中設(shè)置 inheriAttrs: false：

2. 通過 $attrs 把屬性添加到元素上：

我們先輸出一下 $attrs 看看里面有什么：

這是一個響應(yīng)式對象，里面包括了我們傳遞給子組件的屬性

下面我們先通過 v-bind 綁定 $attrs ：

給我們的 input 組件添加屬性：

啟動項目，查看輸出：

現(xiàn)在成功給組件添加了 placeholder 屬性，也成功添加了 type ，密碼框也變成了小圓點(diǎn)。

6. 父組件調(diào)用子組件中的方法

現(xiàn)在我們要實現(xiàn)的就是點(diǎn)擊提交按鈕，然后分別進(jìn)行兩個輸入框的驗證?？墒俏覀兊尿炞C方法在 validate-input 這個子組件中，所以我們就得在父組件中調(diào)用子組件里的方法來實現(xiàn)表單驗證。

1. 給子組件添加 ref 屬性：

2. 給提交按鈕添加點(diǎn)擊事件：

3. 在 setup 中定義響應(yīng)式對象及點(diǎn)擊事件：

const emailChild = ref<InstanceType<typeof ValidateInput>>()
const passwordChild = ref<InstanceType<typeof ValidateInput>>()
const ensureForm = () => {
  emailChild.value?.validateInput()
  passwordChild.value?.validateInput()
}

這樣我們就成功調(diào)用了子組件中的 validateInput 方法，實現(xiàn)了我們想要的效果。

4. 啟動項目，查看效果：

直接點(diǎn)擊提交按鈕：

輸入錯誤郵箱格式，點(diǎn)擊提交：

到這里我們的表單組件就開發(fā)完成了。

到此這篇關(guān)于Vue自定義Form組件實現(xiàn)方法介紹的文章就介紹到這了,更多相關(guān)Vue自定義Form組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論