正则表达式配合input框

验证数字的 jingyan.baidu.com/article/624…

一些常用的正则 mp.weixin.qq.com/s?__biz=MzU…

配合input框和正则做验证，用js写法

Document

<script src="./node_modules/jquery/dist/jquery.js"></script>
<script>
// 必须要失去焦点的时候才会触发
//但是onchange事件在谷歌可以触发但是在ie上不行，可以用onblur代替，达到相同的效果
document.querySelector('input').onchange = function(){
    var val = $('input').val()
    console.log(val)
    var reg = /^\d{20}$/
    // console.log(reg.test(12345678901234567890))
    console.log(reg.test(val))
    if(!reg.test(val)){
        alert('请输入20位的数字')
    }
}

// 按键弹起时触发，可以实时获取，但获取频率太快
// document.querySelector('input').onkeyup= function(){
//     var val = $('input').val()
//     console.log(val)
// }

// 案件按下时触发,并不能实时获取
// document.querySelector('input').onkeydown= function(){
//     var val = $('input').val()
//     console.log(val)
// }
</script>