master

分支 (1)

管理

管理

master

Demo
/
正则表达式.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form</title>
    <style>
        .trues{
            color:green;
        }
        .wrong{
            color:red;
        }
        .prompt{
            color:blue;
        }
    </style>
</head>
<body>
    <form action="#" method="get">
        <p><input type="text" name="text"><span>请输入QQ号</span></p>
        <p><input type="password" name="password"><span>请输入密码</span></p>
        <button>提交</button>
    </form>

    <script>
        var form=document.getElementsByTagName("form")[0];
        var inputs=document.getElementsByTagName("input");
        var btn=document.getElementsByTagName("button")[0];
        var spans=document.getElementsByTagName("span");

        init();
        function init(){
            for(var i=0;i<inputs.length;i++)
            {
                focus(inputs[i]);
                blur(inputs[i]);
            }

            btn.onclick=function(){
                if(!(spans[0].className=="trues"&&spans[1].className=="trues")){
                    return false;
                }
            }
        }

        function focus(dom){
            dom.onfocus=function(){
                var regex=/^[1-9]{1}[0-9]{4,11}$/g;
                var reg=regex.test(this.value);
                var that=this;
                status(that,reg);
            }
        }

        function blur(dom){
            dom.onblur=function(){
                var regex=/^[1-9]{1}[0-9]{4,11}$/g;
                var reg=regex.test(this.value);
                var that=this;
                status(that,reg);
            }
        }

        function status(that,reg){
            if(reg)
                {
                    that.nextSibling.className="trues";
                    that.nextSibling.innerHTML="输入正确";
                }else if(that.value==""){
                    that.nextSibling.className="prompt";
                    that.nextSibling.innerHTML="请输入QQ号";
                }else{
                    that.nextSibling.className="wrong";
                    that.nextSibling.innerHTML="输入不正确";
                };
        }

    </script>


</body>
</html>