input框自动校验长度、数字、11位手机号和验证码和清除默认样式

时间：2021-05-17 15:36:36 收藏：0 阅读：31

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;
}

原文：https://www.cnblogs.com/youseeseeyouonedayday/p/14776404.html