通過驗證後如何看驗證消息

驗證消息通常告訴用戶某些操作是否成功或失敗，它對於用戶體驗和操作流程都非常重要。當用戶通過一項操作之後，獲取到相應的驗證消息能夠幫助用戶更好的了解操作結果，從而採取相應的行動和決策。

一、查看驗證消息的位置

各種驗證消息通常會出現在頁面中的不同位置，主要包括以下幾種位置：

1.頁面正中間

某些操作完成後，相關的驗證消息會直接顯示在頁面正中間。提示消息通常比較重要，打開頁面之後第一時間吸引用戶的注意力，比較容易被用戶發現。

<div class="msg-box">
  <span class="msg-text">操作成功</span>
</div>

2.頁面頂部

某些驗證消息會出現在頁面的頂部，這種位置一般用於較為簡短和重要的提示信息，可以更好的與頁面的內容結合，使得提示消息得到更好的體現。

<div class="alert alert-success">
  <strong>操作成功！</strong>
</div>

3.頁面底部

底部驗證消息一般用於顯示一些用戶不太感興趣的信息，比如某些操作的結果統計或者某些機器生成的信息。這種消息頁面下方出現，不會打斷用戶的操作，也可以讓用戶隨時查看。

<div class="alert alert-info">
  <strong>已成功創建100個用戶!</strong>
</div>

二、驗證消息設計要點

好的驗證消息設計應該滿足以下幾個要點：

1.簡單明了

驗證消息應該簡單明了，用戶一眼就能看懂。不要使用過於複雜的詞彙和術語，新手用戶也能輕鬆看懂。

2.彰顯結果

用戶通過某些操作後，希望能夠清楚地知道操作的結果，驗證消息應該清晰地展示出操作的結果。

3.提供具體信息

某些操作需要提供一些具體的信息才能進行校驗，當出現驗證失敗的情況時，一定要給用戶指出具體的錯誤信息，讓用戶能夠快速定位錯誤。

三、案例演示

下面是一個表單驗證的示例代碼，通過以下代碼可以了解更多的驗證消息設計思路。

<form id="register-form">
  <label>用戶名</label>
  <input type="text" id="username"/>
  <div class="error-msg">請填寫用戶名！</div>
  
  <label>密碼</label>
  <input type="password" id="password"/>
  <div class="error-msg">密碼必須為6-20位的字符，必須包含數字和字母！</div>
  
  <label>確認密碼</label>
  <input type="password" id="confirm-password"/>
  <div class="error-msg">兩次輸入的密碼必須一致！</div>
  
  <input type="submit" value="註冊"/>
  <div class="success-msg">註冊成功！</div>
</form>

在上述代碼中，用到了error-msg和success-msg類來分別展示驗證錯誤和成功信息。根據用戶填寫的內容，做出相應驗證，錯誤信息就會展示在error-msg塊中，成功信息展示在success-msg塊中。這樣的設計可以幫助用戶更好的理解操作結果，提高用戶體驗。