到昨天為止，基本的畫面已經完成了~

今天會著重在程式邏輯，要來做 [輸入帳號] 及 [輸入密碼] 的表單驗證部分
因為還沒做到串接後端，所以都先使用假資料來驗證

#輸入帳號驗證

輸入帳號跟輸入密碼做的邏輯判斷其實差不多，先來處理輸入帳號的部分，後面做輸入密碼就直接大絕招xD

開啟上次做完的 /components/KeyinUser.vue 輸入帳號頁開始吧~

#Step 1

將 [繼續] 按鈕加上click事件:

<v-btn 
  v-text="`繼續`" 
  @click="verifyUser">
</v-btn>

按鈕主要的動作會是:

1. 做基本表單驗證
   例如必填、字數長度限制等等
   • 驗證成功:
     向後端丟帳號做帳號驗證，後端回傳帳號有效性及對應資訊
     例如姓名等等
   • 驗證失敗:
     表單呈現錯誤訊息
2. 後端回傳帳號有效性
   • 有效:
     將回覆的資訊存到data，並跳轉頁面到輸入密碼
   • 無效:
     表單呈現錯誤訊息

流程大致會是這樣~!!

#Step 2

做一個假的驗證資料放到data中:

data() {
  return {
    ...,
    fakedata: {
      accountId: "aa1234", //假帳號
      username: "Maëlyne Roux", //假姓名
    },
  };
},

#Step 3

驗證帳號的事件內容:

verifyUser() {
  if (this.$refs.form.validate()) {
    
  }
},

this.$refs.form.validate() 這段用到Vuetify-Forms表單組件驗證提交的部分
簡單說明一下，this.$refs.form 負責抓到 ref 值為 form 的表單元件，再做 validate() 驗證的動作，validate() 會將表單中 所有的 表單內容(包含輸入框、單選、多選等等)根據對應的 rules 規則來驗證

#Step 4

前端驗證通過後，就要呼叫後端API做帳號驗證
這邊先簡單判斷輸入值有沒有和假資料相同就好:

if (this.$refs.form.validate()) {    
  if (this.myAccountId === this.fakedata.accountId) {
    //如果帳號成功，要做的事
  } else {
    //如果帳號失敗，要做的事
  }
}

#Step 5

前面分析過假設帳號驗證成功，要做「將回覆的資訊存到data，並跳轉頁面到輸入密碼」
這裡做了兩件事:

• 將回覆的資訊存到data
  回覆的資訊包含姓名，要回存到父層，也就是說要使用 .sync + $emit 的方式來操作

this.$emit("update:username", this.fakedata.username);

• 跳轉頁面到輸入密碼頁
  跳轉就很好理解，直接用 $router.push 來處理

this.$router.push({ name: "KeyinPswd" });

目前帳號驗證內容長這樣:

if (this.$refs.form.validate()) {    
  if (this.myAccountId === this.fakedata.accountId) {
    this.$emit("update:username", this.fakedata.username);
    this.$router.push({ name: "KeyinPswd" });
  } else {
    //如果帳號失敗，要做的事
  }
}

#Step 6

帳號驗證失敗的部份，後端需要回傳失敗原因，前端則將這個原因呈現上去
這裡會需要再寫一個規則:

usernameRules: [
  ...,
  (v) => this.textFieldError || this.errorMessages,
],

• textFieldError(boolean): 判斷表單元件是否驗證通過
• errorMessages(string): 驗證不通過時呈現的錯誤內容

帳號驗證失敗時就可以這樣寫:

this.textFieldError = true;
this.errorMessages = "帳號錯誤";

錯誤內容寫成method來呼叫:

setTextFieldError(textFieldError, errorMessages) {
  this.textFieldError = textFieldError;
  this.errorMessages = errorMessages;
},

最後帳號驗證內容長這樣:

if (this.$refs.form.validate()) {    
  if (this.myAccountId === this.fakedata.accountId) {
    this.$emit("update:username", this.fakedata.username);
    this.$router.push({ name: "KeyinPswd" });
  } else {
    this.setTextFieldError(false, "帳號錯誤");
  }
}

#Step 7

最後在輸入框輸入資料時，把錯誤消除掉，不然錯誤永遠出現還蠻奇怪的xD

<v-text-field
  ...
  label="輸入您的帳號"
  @keyup="setTextFieldError(true, '')"
></v-text-field>

順便加上一個方便的指令 @keyup.enter，作用是當按下 [Enter] 時，觸發驗證事件
因為我自己很習慣輸入完就直接Enter

<v-text-field
  ...
  label="輸入您的帳號"
  @keyup.enter.prevent="verifyUser"
></v-text-field>

由於 @keyup.enter 會觸發表單的 submit 事件，所以 v-form 要再加上 @submit.prevent 就可以阻止表單觸發:

<v-form ref="form" @submit.prevent>
  ...
</v-form>

#結果

輸入帳號的表單驗證就完成囉~
看看最後結果畫面~

#輸入密碼驗證

輸入密碼和輸入帳號的寫法相去不遠~

#Step 1

一樣先放個假密碼:

data() {
  return {
    ...,
    fakedata: {
      password: "aa9876",
    },
  };
},

#Step 2

[繼續] 按鈕加上click事件:

<v-btn 
  v-text="`繼續`" 
  @click="verifyPswd">
</v-btn>

驗證成功就導回首頁，失敗就跳出提示訊息:

methods: {
  verifyPswd() {
    if (this.$refs.form.validate()) {
      if (this.myPassword === this.fakedata.password) {
        this.$router.push({ name: "Index" });
      } else {
        this.setTextFieldError(false, "密碼錯誤");
      }
    }
  },
  setTextFieldError(textFieldError, errorMessages) {
    this.textFieldError = textFieldError;
    this.errorMessages = errorMessages;
  },
},

#Step 3

規則的部份也要加上:

passwordRules: [
  ...,
  (v) => this.textFieldError || this.errorMessages,
],

#Step 4

加上輸入時消除錯誤，以及 [Enter] 事件:

<v-text-field
  label="輸入您的密碼"
  ...
  @keyup="setTextFieldError(true, '')"
  @keyup.enter.prevent="verifyPswd"
></v-text-field>

記得表單加上 @submit.prevent 阻止 submit 事件:

<v-form ref="form" @submit.prevent>
  ...
</v-form>

#結果

這樣就完成囉~
知道大絕招是什麼了嗎xD

看看最後結果畫面~

今日重點:

• Vuetify 組件的API查詢及使用
  • Vuetify-Forms表單組件
• this.$refs.form.validate() 觸發表單驗證
• @keyup.enter 按下 [Enter] 觸發事件
• @submit.prevent 防止表單觸發 submit 事件

今天的進度算是把前端第一階段完成了~

昨天太忙碌結果忘記發文 賽程中斷了...好難過QQ
不過還是會盡量持續30天賽程發文

有需要改進或是任何意見建議歡迎下面留言~