Vue校驗詳解

在實際開發中，表單數據校驗是一個必不可少的環節，Vue提供了一種方便易用的校驗方式。本文將從多個方面詳細闡述Vue校驗的相關知識，包括校驗規則、校驗成功才能發請求、校驗字數、校驗文件格式、校驗提示、校驗數字、校驗手機號、校驗子表格、校驗子表單以及校驗正整數。

一、Vue校驗規則

Vue校驗規則使用vuelidate插件，該插件能夠將數據模型和校驗規則映射起來，實現校驗表單數據的功能。在使用該插件之前，需要先安裝並引入vuelidate和vue在組件中註冊。

npm install vuelidate --save

import Vue from 'vue'
import Vuelidate from 'vuelidate'

Vue.use(Vuelidate)

首先可以在data中初始化需要校驗的數據，並在computed中定義校驗規則。如下代碼所示，通過required規則，定義了name的必填限制。

import { required } from 'vuelidate/lib/validators'

export default {
  data () {
    return {
      name: ''
    }
  },
  validations: {
    name: {
      required
    }
  }
}

在模板中，需要綁定v-model到需要校驗的數據上，並在需要校驗的元素上綁定指令。當校驗不符合規則時，會在元素下方顯示錯誤提示。

<template>
  <div>
    <input type="text" v-model="$v.name.$model">
    <div v-if="$v.name.$error">請輸入名稱</div>
  </div>
</template>

二、Vue校驗成功才能發請求

在實際開發中，當表單數據校驗成功時，才能發送表單數據到伺服器。Vue提供了watch監聽校驗狀態，當校驗成功時，可以設置一個標誌位，在提交時檢查標誌位是否為真，如下代碼所示：

<template>
  <div>
    <input type="text" v-model="$v.name.$model">
    <div v-if="$v.name.$error">請輸入名稱</div>
    <button @click="submitForm">提交</button>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        name: '',
        isSubmit: false
      }
    },
    validations: {
      name: {
        required
      }
    },
    watch: {
      $v: {
        deep: true,
        handler () {
          this.isSubmit = !this.$v.$invalid
        }
      }
    },
    methods: {
      submitForm () {
        if (this.isSubmit) {
          // 發送表單數據到伺服器
        }
      }
    }
  }
</script>

三、Vue校驗字數

在實際開發中，需要對輸入框的字數進行限制，Vue提供了maxLength規則和minLength規則，分別實現字元串最大長度限制和最小長度限制，示例代碼如下：

export default {
  data () {
    return {
      name: ''
    }
  },
  validations: {
    name: {
      maxLength: maxLength(10),  // name最大長度為10
      minLength: minLength(2)    // name最小長度為2
    }
  }
}

在模板中，需要綁定v-model到需要校驗的數據上，並在需要校驗的元素上綁定指令。當校驗不符合規則時，會在元素下方顯示錯誤提示。

<template>
  <div>
    <input type="text" v-model="$v.name.$model">
    <div v-if="$v.name.$error">
      <div v-if="!$v.name.maxLength">名稱長度超限</div>
      <div v-if="!$v.name.minLength">名稱長度不足</div>
    </div>
  </div>
</template>

四、Vue校驗文件格式

在實際開發中，需要對上傳文件的格式進行限制。Vue提供了fileSize規則和文件類型規則，分別實現文件最大大小限制和文件類型限制，示例代碼如下：

<template>
  <div>
    <input type="file" @change="handleFile">
    <div v-if="!$v.file.$invalid">文件格式正確</div>
    <div v-if="$v.file.$error">用圖片作為示例，文件格式不正確</div>
  </div>
</template>

<script>
  import { fileSize, fileType } from 'vuelidate/lib/validators'

  export default {
    data () {
      return {
        file: null
      }
    },
    validations: {
      file: {
        fileSize: fileSize(2 * 1024 * 1024),      // 文件最大2MB
        fileType: fileType(['jpg', 'png', 'gif']) // 文件類型必須為jpg/png/gif
      }
    },
    methods: {
      handleFile (event) {
        this.file = event.target.files[0]
      }
    }
  }
</script>

五、Vue校驗提示

在實際開發中，需要對校驗錯誤進行友好提示。Vue提供了errorBag選項和$error對象，實現對校驗錯誤的判斷和獲取錯誤提示信息。示例代碼如下：

<template>
  <div>
    <input type="text" v-model="$v.name.$model">
    <div v-if="$v.name.$error">{{ $v.name.$params.required ? '名稱不能為空' : '名稱格式不正確' }}</div>
  </div>
</template>

上述代碼中，$v.name.$params.required是名稱是否必填的一個判斷，如果為真，則提示名稱不能為空，否則提示名稱格式不正確。

六、Vue校驗數字

在實際開發中，需要對輸入框的數字進行判斷，Vue提供了maxValue規則和minValue規則，分別實現數字最大值限制和數字最小值限制。示例代碼如下：

export default {
  data () {
    return {
      age: 0
    }
  },
  validations: {
    age: {
      maxValue: maxValue(120), // age最大值為120
      minValue: minValue(0)   // age最小值為0
    }
  }
}

在模板中，需要綁定v-model到需要校驗的數據上，並在需要校驗的元素上綁定指令。當校驗不符合規則時，會在元素下方顯示錯誤提示。

<template>
  <div>
    <input type="text" v-model="$v.age.$model">
    <div v-if="$v.age.$error">
      <div v-if="!$v.age.maxValue">年齡超過最大值</div>
      <div v-if="!$v.age.minValue">年齡小於最小值</div>
    </div>
  </div>
</template>

七、Vue校驗手機號

在實際開發中，需要對手機號進行校驗。Vue提供了mobile規則，判斷手機號是否正確。示例代碼如下：

export default {
  data () {
    return {
      phone: ''
    }
  },
  validations: {
    phone: {
      mobile
    }
  }
}

在模板中，需要綁定v-model到需要校驗的數據上，並在需要校驗的元素上綁定指令。當校驗不符合規則時，會在元素下方顯示錯誤提示。

<template>
  <div>
    <input type="text" v-model="$v.phone.$model">
    <div v-if="$v.phone.$error">手機號格式不正確</div>
  </div>
</template>

八、Vue校驗子表格

在某些場景中，需要對表格進行校驗，包括校驗表格的行數、列數和行數據。Vue提供了subValidations規則和rowValidations規則，分別實現對行數據和行數的校驗。示例代碼如下：

export default {
  data () {
    return {
      tableData: [
        {
          name: '',
          age: ''
        },
        {
          name: '',
          age: ''
        }
      ]
    }
  },
  validations: {
    tableData: {
      $each: {
        name: {
          required
        },
        age: {
          required,
          minValue: minValue(0),
          maxValue: maxValue(120)
        }
      }
    }
  }
}

上述代碼中，$each表示對每一行的數據進行校驗。當校驗不符合規則時，會在元素下方顯示錯誤提示。

九、Vue校驗子表單

在某些場景中，需要對錶單中的子表單進行校驗。Vue提供了$each和deep選項，實現對子表單的校驗。示例代碼如下：

<template>
  <div>
    <div v-for="(user, index) in userList" :key="index">
      <input type="text" v-model="$v.userList[index].name.$model">
      <div v-if="$v.userList[index].name.$error">請輸入姓名</div>
      <input type="text" v-model="$v.userList[index].age.$model">
      <div v-if="$v.userList[index].age.$error">
        <div v-if="!$v.userList[index].age.maxValue">年齡超過最大值</div>
        <div v-if="!$v.userList[index].age.minValue">年齡小於最小值</div>
      </div>
    </div>
    <button @click="addUser">添加用戶</button>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        userList: [
          { name: '', age: '' },
          { name: '', age: '' }
        ]
      }
    },
    validations: {
      userList: {
        $each: {
          name: { required },
          age: { required, minValue: minValue(0), maxValue: maxValue(120) }
        }
      }
    },
    methods: {
      addUser () {
        this.userList.push({ name: '', age: '' })
      }
    }
  }
</script>

上述代碼中，$each表示對每個子表單進行校驗，deep選項表示對子表單數據進行遞歸校驗。