引言

通常情況下，我們在進行表單驗證時（比如提交登入註冊資訊），為了安全考慮以及進一步保證表單資訊填寫的正確性，會再服務端驗證之前，在前端頁面先做一次驗證。但是瀏覽器預設的表單填寫錯誤資訊並不是我們所期望的，因此需要自定義錯誤資訊。

表單如下：

<input id="username" name="username" type="text" placeholder="使用者名稱" maxlength="10"
       pattern="^[a-zA-Z][a-zA-Z0-9_]{0,}" required>
<input type="submit" value="註冊">
 

預設的表單提示

情況1

當用戶名為空時，瀏覽器提示如下圖：

此時 input 的 validationMessage 和 validity 打印出來是：

validationMessage: ‘請填寫此欄位。’
patternMismatch: false
valid: false
valueMissing: true

這種情況我們一般不做修改；

情況2

當用戶名填寫 123 不符合預設正則表示式時，瀏覽器提示如下圖：

此時 input 的 validationMessage 和 validity 打印出來是：

validationMessage: ‘請與所請求的格式保持一致。’
patternMismatch: true
valid: false
valueMissing: false

但我們往往想按照自己的意願向用戶提示的更精準一些，這時就需要自定義錯誤提示了；

情況3

當用戶名填寫符合預設正則表示式時：
此時 input 的 validationMessage 和 validity 打印出來是：

validationMessage: ‘’
patternMismatch: false
valid: true
valueMissing: false

直接跳轉，也不需做處理。

自定義的表單提示

在 username input 下新增獲得使用者輸入時執行的指令碼：

oninput="checkOnInput(this, 'custom tip')"

function
 
 checkOnInput(input, tip) {
    input.setCustomValidity(tip);
}

情況1

當用戶名為空時，瀏覽器提示如下圖：

此時 inpu t的 validationMessage 和 validity 打印出來是：

validationMessage: ‘custom tip’
patternMismatch: false
valid: false
valueMissing: true

這種情況我們一般不做修改；

情況2

當用戶名填寫 123 不符合預設正則表示式時，瀏覽器提示如下圖：

此時 input 的 validationMessage 和 validity 打印出來是：

validationMessage: ‘custom tip’
patternMismatch: true
valid: false
valueMissing: false

但我們往往想按照自己的意願向用戶提示的更精準一些，這時就需要自定義錯誤提示了；

情況3

當用戶名填寫符合預設正則表示式時，瀏覽器提示如下圖：（與情況2相同）

此時 input 的 validationMessage 和 validity 打印出來是：

validationMessage: ‘’
patternMismatch: false
valid: false
valueMissing: false

不跳轉，所以上述處理不正確。

自定義的表單提示，提示內容為空

在 username input 下新增獲得使用者輸入時執行的指令碼：

oninput="checkOnInput(this, '')"

function checkOnInput(input, tip) {
    input.setCustomValidity(tip);
}

經過測試，與預設的表單提示情況相同。

綜上所述

自定義錯誤提示，當輸入框填寫為空或者正確時，列印的資料和預設提示有明顯區別，與我們所期望的也相差很大。
因此設定自定義錯誤提示可以根據 patternMismatch 的值判斷，是情況1、3時，預設處理；是情況2時，自定義處理。

處理辦法

在 username input 下新增獲得使用者輸入時執行的指令碼：

oninput="checkOnInput(this, 'custom tip')"

function checkOnInput(input, tip) {
    if (input.validity.patternMismatch === true) {
        input.setCustomValidity(tip);
    } else {
        input.setCustomValidity('');
    }
}

這樣就可以只在輸入錯誤的時候按照我們的意願來提示啦。