Vue.js 表單驗證：正確使用 blur 事件判斷兩次密碼輸入是否一致

問題場景

在 Vue.js 單文件組件中，兩個密碼輸入框（password、confirm）未包裹在 <form> 中，需在第二個輸入框失去焦點（blur）時驗證兩次輸入是否一致。原代碼嘗試用內聯 onblur="equalcheck()" 調用全局函數，但報 equalcheck is not defined，且直接用 password.value 獲取值在 Vue 環境下不生效。

<div class="form-group">
  <input v-model="user.pass" type="password" placeholder="密碼">
</div>
<div class="form-group">
  <input v-model="user.confirm" type="password" placeholder="密碼確認" onblur="equalcheck()">
</div>

<script>
// 組件內部結構
module.exports = {
  data() { return { user: { pass: '', confirm: '' } } },
  methods: { /* 這裡該放驗證邏輯 */ }
}
</script>

核心問題分析

1. 內聯事件綁定失效：Vue 模板編譯後，onblur="equalcheck()" 會嘗試在全局作用域查找 equalcheck，但該函數定義在組件 methods 或 <script> 內部，不在全局，故報「未定義」。
2. 直接用 DOM 獲取值違背 Vue 響應式原則：password.value 繞過了 v-model 的雙向綁定，無法觸發響應式更新，且在組件銷毀後可能引用舊 DOM。
3. 缺少 id 屬性：輸入框無 id，即使用 document.getElementById 也無法定位。

正確解決方案：Vue 原生事件綁定 + 響應式數據驗證

1. 模板中使用 @blur 綁定方法

<input 
  v-model="user.pass" 
  type="password" 
  id="password" 
  placeholder="密碼" 
  @blur="checkPasswordMatch" 
>
<input 
  v-model="user.confirm" 
  type="password" 
  id="confirm" 
  placeholder="密碼確認" 
  @blur="checkPasswordMatch" 
>
<!-- 可選：顯示錯誤提示 -->
<span v-if="passwordError" class="error">兩次輸入的密碼不一致</span>

2. methods 中實現驗證邏輯

methods: {
  checkPasswordMatch() {
    if (this.user.pass !== this.user.confirm) {
      this.passwordError = true;
      // 可選：清空確認框、聚焦等
      // this.user.confirm = '';
      // this.$refs.confirmInput.focus();
    } else {
      this.passwordError = false;
    }
  }
}

3. data 中初始化狀態

data() {
  return {
    user: { pass: '', confirm: '' },
    passwordError: false
  };
}

進階優化：使用 watch 實時驗證

若需輸入過程中即時提示，可監聽 user.confirm：

watch: {
  'user.confirm'(newVal) {
    this.passwordError = newVal !== this.user.pass;
  }
}

關鍵最佳實踐總結

• 拒絕內聯 onblur/onclick：Vue 模板務必使用 @event 或 v-on:event 綁定組件方法。
• 數據驅動視圖：驗證邏輯直接比較 this.user.pass 和 this.user.confirm，無需操作 DOM。
• 給輸入框加 id/ref：便於極少數需原生 DOM 操作的場景（如聚焦），使用 ref="confirmInput" 並通過 this.$refs.confirmInput 訪問。
• 錯誤狀態綁定視圖：用 v-if/v-show 控制錯誤提示顯示，體驗更佳。

遵循 Vue 的響應式數據流，密碼一致性驗證只需幾行代碼，既優雅又健壯。拋棄 jQuery 時代的 DOM 思維，擁抱數據驅動開發。