Vue文檔中的表單驗證函數使用方法

Vue是一種用於建立使用者介面的漸進式JavaScript框架。 Vue的重點是它的簡潔性和靈活性，幾乎可以在任何專案中使用。作為前端開發人員，我們通常需要在表單驗證中使用函數。 Vue文件中提供了一些表單驗證函數，這些函數非常實用，可以幫助開發人員更有效率的完成表單驗證。本文將介紹Vue文件中的表單驗證函數的使用方法。

首先，我們需要在Vue的範本中使用v-model綁定表單欄位的值。例如，以下程式碼使用v-model綁定一個輸入框的值：

<template>
  <div>
    <input type="text" v-model="username">
  </div>
</template>

在Vue文件中，表單驗證函數包含在Vue的實例方法$validator。要使用表單驗證函數，我們需要先透過Vue.use(VeeValidate)引入VeeValidate插件，這是Vue官方推薦的表單驗證插件。

在引入VeeValidate之後，我們可以在Vue實例的生命週期中呼叫$validator方法，例如在created()方法中，以便在Vue實例被創建時完成初始化。

<script>
import Vue from 'vue';
import VeeValidate from 'vee-validate';  // 引入VeeValidate插件
Vue.use(VeeValidate);  // 使用VeeValidate
export default {
  name: 'formDemo',
  data() {
    return {
      username: '',
    };
  },
  created() {
    this.$validator.localize('zh_CN', {  // 将验证器语言设置为中文
      messages: {
        required: (field) => `${field}不能为空`,
      },
    });
  }
}

上述程式碼中，在created()方法中，我們使用this.$validator.localize()方法將驗證器的語言設定為中文，並定義了一條自訂錯誤訊息。這裡的required是一個預設的VeeValidate規則，它表示此項目欄位必填。在本例中，自訂錯誤訊息是「使用者名稱不能為空」。

現在，我們定義了一個自訂的VeeValidate規則checkUsernameAvailable，在本例中，它是用來檢查使用者名稱是否可用的。在該規則中，我們可以存取輸入框綁定的值，然後我們可以使用Axios請求POST方法將該值傳送到伺服器。如果傳回的結果是資料狀態碼為200，表示該使用者名稱可用，否則表示使用者名稱不可用。

<script>
import Vue from 'vue';
import VeeValidate from 'vee-validate';
import axios from 'axios';
Vue.use(VeeValidate);
export default {
  name: 'formDemo',
  data() {
    return {
      username: '',
    };
  },
  created() {
    this.$validator.localize('zh_CN', {
      messages: {
        required: (field) => `${field}不能为空`,
        checkUsernameAvailable: (field) => `${field}已经被注册了`,
      },
    });

    this.$validator.extend('checkUsernameAvailable', {
      getMessage: (field, params, data) => data.message,
      validate: async (value) => {
        const { data } = await axios.post('/api/checkusername', {
          username: value,
        });
        return {
          valid: data.status === 200,
          data: data,
        };
      },
    });
  }
}
</script>

在上述程式碼中，我們定義了一個帶有自訂函數的驗證規則checkUsernameAvailable，該規則使用非同步/await來等待Axios的POST方法回應。如果回應中的狀態碼為200，則傳回true，否則傳回false。

最後，我們需要將這個驗證規則綁定到HTML表單中。在表單元素中新增data-vv-validate屬性，這告訴Vue Validator開始驗證表單。然後，我們在需要驗證的表單元素中新增自訂規則v-validate="{ rules: { checkUsernameAvailable: true } }"。這告訴Vue Validator使用我們自訂的驗證規則。

<template>
  <div>
    <form @submit.prevent="">
      <div>
        <input type="text" name="username" v-model="username" data-vv-validate="''" v-validate="{ rules: { checkUsernameAvailable: true } }" placeholder="请输入用户名">
        <div v-show="errors.has('username')" class="invalid-feedback">{{ errors.first('username') }}</div>
      </div>
      <button @click="submitForm">提交</button>
    </form>
  </div>
</template>

在上述程式碼中，我們在輸入框中加入了一個錯誤訊息v-show="errors.has('username')"，當錯誤訊息不為空時該訊息會被顯示出來。

現在，我們已經完成了自訂驗證規則的建立和綁定。如果使用者名稱輸入框中的值在伺服器端可用，則表單提交數據，否則Vue Validator將顯示自訂錯誤訊息。

總的來說，Vue Validator是一個非常強大且易於使用的表單驗證外掛程式。 Vue為前端開發人員提供了一個優秀的平台來快速開發表單驗證，Vue Validator的使用淺顯易懂，能大幅提升開發效率。

以上是Vue文檔中的表單驗證函數使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！