input自動校驗長度、數字、11位手機號、驗證碼和清除默認樣式

 

---

 

1.姓名需要做字符串長度的限制，可以使用input標簽的maxlength屬性來做最大長度限制

<input type="text" name="username" id="an-drive-user-name" value="" placeholder="姓名" maxlength=15>

 

2.手機號碼的校驗，需要做的是長度不能超過11位數且輸入非數字的話直接清除value，最后在點擊提交時對電話號碼進行非空且符合運行商電話號碼的正則校驗（oninput事件在 value 改變時觸發即每增加或刪除一個字符就會觸發，但是值得注意的是通過 js 改變 value 時卻不會觸發；onkeyup 事件會在鍵盤按鍵被松開時發生，使用replace方法結合正則校驗可以來實現輸入非數字的話清除替換value）　

<input type="text" name="phone" id="an-drive-user-phone" value="" placeholder="手機" oninput="if(value.length>5)value=value.slice(0,11)" onkeyup="value=value.replace(/[^\d]/g,'')" maxlength=11>

 

 if (!(/^(13[0-9]|14[0-9]|15[0-9]|166|17[0-9]|18[0-9]|19[8|9])\d{8}$/.test($(" input[ name='phone' ] ").val()))) {
    $("#toast").showMessage(`手機號碼有誤，請重填`, 2000);
    return false
  }

2.1 為什么要使用oninput事件使input的類型為number且限制輸入的數字位數？

• 使用 onkeyup 事件，有 bug ，那就是在中文輸入法狀態下，輸入漢字之后直接回車，會直接輸入字母
• 使用 onchange 事件，在輸入內容后，只有 input 喪失焦點時才會得到結果，並不能在輸入時就做出響應

3.短信驗證碼的校驗，需要做的是限制可輸入的長度且輸入非數字的話直接清除value

<input type="text" name="authCode" id="drive-user-phone7" value="" placeholder="驗證碼" onkeyup="value=value.replace(/[^\d]/g,'')" maxlength=6>

 4.補充：清除input框的默認樣式

input {
    background: none;
    outline: none;
    border: none;
    padding: 0;
    margin: 0;
    -webkit-box-shadow: 0 0 0 1000px white inset;

}
input:focus {
    outline: none;
}
//蟹蟹點贊~~~