正则表达式验证

最新推荐文章于 2024-09-29 11:25:09 发布

Weiyatong

最新推荐文章于 2024-09-29 11:25:09 发布

阅读量70

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/Weiyatong/article/details/127668563

版权

一，身份证验证

<html>
// css修饰
  <style>
        .ok{
            color: green;
        }
        .false{
            color: red;
        }
    </style>
<boday>
//input表单
 身份证号<input type="text" id="one"><span id="two"></span>
<script>
//身份证正则

 let three=document.getElementById('one')

 three.onblur=function(){
    let sp=document.getElementById('two')
    let reg=/^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
       
    if(reg.test(three.value)){
        sp.innerHTML='用户输入正确'
        sp.classList.remove('false')
        sp.classList.add('ok')
    }else{
        sp.innerHTML='用户输入不正确'
        sp.classList.remove('ok')
        sp.classList.add('false')
    }

 }


    </script>
</body>
</html>

二，用户名验证

  <html>
<style>
        .ok{
            color: green;
        }
        .false{
            color: red;
        }
    </style>
</head>
<body>
    用户名<input type="text" class="one"><span id="two"></span>
    <script>

let reg=/^[a-zA-Z0-9_-]{3,7}$/

  let three=document.querySelector('.one')
  three.onblur=function(){
    let four=document.getElementById('two')
    if(reg.test(this.value)){
       four.classList.remove('false')
       four.classList.add('ok')
       four.innerHTML='用户名输入正确'
    }else{
        four.classList.remove('ok')
       four.classList.add('false')
       four.innerHTML='用户名输入错误'
    }
  }

// let  t=reg.test(str)
// console.log(t);



    </script>
</body>
</html>

三，电话验证

<html>
 <style>
        .ok {
            color: green;
        }

        .false {
            color: red;
        }
    </style>
</head>

<body>
    <input type="text" id="one"><span id="two"></span>
    <script>
        let reg =/^029[0-9]{8}$/
        let txt = document.querySelector('#one')
        txt.onblur = function () {
            console.log(txt.value)
            console.log(reg.test(txt.value))
            let span = document.querySelector('#two')
            if (reg.test(txt.value)) {
                span.classList.remove('false')
                span.innerHTML = '符合要求'
                span.classList.add('ok')

            } else {
                span.classList.remove('ok')
                span.innerHTML = '不符合要求'
                span.classList.add('false')
            }
        }
    </script>
</body>

</html>