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中文網其他相關文章！
