Web 應用程序中，修改密碼是一個重要的功能，因為用戶需要保護他們的賬戶免受未經授權的訪問。

Vue 是一款流行的 JavaScript 框架，它在前端開發中廣泛使用。Vue 提供了許多內置的指令和組件，故使得數據校驗變得非常簡單且便捷。

在 Vue 中，我們可以利用 v-model 和計算屬性來創建修改密碼表單，以及進行相應的數據校驗。

<template>
<form @submit.prevent="submit">
<label>
舊密碼:
<input type="password" v-model="oldPassword">
</label>
<label>
新密碼:
<input type="password" v-model="newPassword">
</label>
<label>
確認密碼:
<input type="password" v-model="confirmPassword">
</label>
<p v-if="error">{{ error }}</p>
<button>提交</button>
</form>
</template>
<script>
export default {
data() {
return {
oldPassword: '',
newPassword: '',
confirmPassword: '',
error: ''
}
},
computed: {
passwordsMatch() {
return this.newPassword === this.confirmPassword;
},
validPasswords() {
return this.oldPassword !== '' && this.newPassword !== '' && this.confirmPassword !== '';
},
validLength() {
return this.newPassword.length >= 8;
}
},
methods: {
submit() {
if (!this.passwordsMatch) {
this.error = '新密碼和確認密碼不一致！';
return;
}
if (!this.validPasswords) {
this.error = '請填寫所有密碼！';
return;
}
if (!this.validLength) {
this.error = '新密碼長度小于 8 位！';
return;
}
// 實現密碼修改邏輯
}
}
}
</script>

在上面的代碼中，我們創建了一個包含舊密碼、新密碼和確認密碼的表單。每個輸入字段的值都使用 v-model 進行綁定。在計算屬性中，我們定義了 passwordsMatch、validPasswords 和 validLength 函數來進行數據校驗。在 submit 方法中，我們檢查每個條件，如果不滿足條件，我們將錯誤信息存儲在 error 變量中，最終在模板中輸出。

以上是一個簡單的密碼修改表單的校驗例子，Vue 內置的指令和組件使得數據校驗變得更加簡單了。在實際開發中，我們可以根據業務需求進行自定義校驗，使得用戶輸入更加友好、易用。