input邊寫邊驗證？正則表達式寫在屬性里？小技巧

首先，我們需要一個input，后面的span用來存放驗證信息，

<input type="tel" placeholder="電話號碼" maxlength="11" required="required"  pattern="^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$" /><span class="validity"></span>

這是常用的電話號碼驗證，然后寫樣式

input + span {
              padding-right: 30px;
              white-space: nowrap;
              font-size: 20px;
            }
            
            input:invalid+span:after {
              position: absolute; content: '請輸入正確的手機號!';
              padding-left: 5px;
              color: #8b0000;
            }
            
            input:valid+span:after {
              position: absolute;
              content: '✓';
              padding-left: 5px;
              color: #009000;
            }

然后，效果圖如下：