JavaScript正则表达表单验证-蒲公英云

JavaScript正则表达表单验证

邮箱提交、身份证、手机号

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <input type="text" name="mail" id="mail" value="" />
        <button>
            邮箱提交
        </button>
        <hr >
        <h3>身份证</h3>
        <input type="text" name="shenfen" id="shenfen" placeholder="请输入身份证号码" value="" />
        <hr >
        <h3>手机号码</h3>
        <input type="text" name="mobile" placeholder="请输入手机号码" id="mobile" value="" />
        <script type="text/javascript">
            var btn = document.querySelector("button");
            var inputDom = document.querySelector("#mail")
            /* btn.onclick = function(){
                var mailValue = document.querySelector("#mail").value;
                //邮箱的正则对象
                //单词字符+@单词字符+\.单词字符
                var regex = /\w+@\w+\.\w+/ig;
                if(regex.test(mailValue)){
                    alert("输入正确")
                } else{
                    alert("输入错误")
                }
            } */
            inputDom.oninput = function(e){
                var mailValue = document.querySelector("#mail").value;
                //邮箱的正则对象
                //单词字符+@单词字符+\.单词字符
                var regex = /\w+@\w+\.\w+/ig;
                if(regex.test(mailValue)){
                    //alert("输入正确")
                    inputDom.style.background="greenyellow"
                } else{
                    inputDom.style.background = "hotpink"
                    //alert("输入错误")
                }
            }
            var shenfenInput = document.querySelector("#shenfen");
            shenfenInput.oninput = function(){
                //身份证号码校验
                //18数字,17数字+字符
                var regex = /^\d{17}[A-z0-9]$|^\d{16}$/ig;
                if(regex.test(shenfenInput.value)){
                    shenfenInput.style.background="greenyellow"
                }else{
                    shenfenInput.style.background = "hotpink"
                    //alert("输入错误")
                }
            }
            var mobileInput = document.querySelector("#mobile")
            mobileInput.oninput = function(){
                //手机校验
                var regex = /^1[0-9]{10}$/;
                if(regex.test(mobileInput.value)){
                    mobileInput.style.background="greenyellow"
                }else{
                    mobileInput.style.background = "hotpink"
                    //alert("输入错误")
                }
            }
        </script>
    </body>
</html>