用正则表达式实现的登陆注册页面

动图展示:用正则表达式实现的登陆注册页面_第1张图片

所有代码展示

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

</head>
<body style="background-color: beige">
用户名:<input type="text" id="userName"/><span id="regName"></span><br/>
密码:<input type="text" id="pwd"/><span id="regPwd"></span><br/>
确认密码:<input type="text" id="surePwd"/><span id="regSurePwd"></span><br/>
邮箱:<input type="text" id="mailbox"/><span id="regMailbox"></span><br/>
手机号:<input type="text" id="phone"/><span id="regPhone"></span><br/>
身份证号:<input type="text" id="card"/><span id="regCard"></span><br/>
地址:<input type="text" id="address"/><span id="regAddress"></span><br/>
<input type="button" value="校验" onclick="varReg()"/>
<script type="text/javascript">

         //判断用户名格式
        function regName() {
            userName = document.getElementById("userName").value;
            var var1 = /^[A-Z]{1}[A-Za-z_]{5,19}$/;//用户名
            if (var1.test(userName)) {
                //用户名
                document.getElementById("regName").innerText = "正确";
                document.getElementById("regName").style.color = "green";
            } else {
                document.getElementById("regName").innerText = "请输入大写字母开头 6-20位字符 不允许有符号但是允许有_";
                document.getElementById("regName").style.color = "red";
            }
        }

        function regPwd() {
            pwd = document.getElementById("pwd").value;
            var var2 = /^[A-Z]{1}[A-Za-z0-9]{7,14}/;//密码
            if (var2.test(pwd)) {
                //密码
                document.getElementById("regPwd").innerText = "正确";
                document.getElementById("regPwd").style.color = "green";
            } else {
                document.getElementById("regPwd").innerText = "请输入大写开头 数字字母符号混合 8-15位";
                document.getElementById("regPwd").style.color = "red";
            }
        }

        function regSurePwd() {
            surePwd = document.getElementById("surePwd").value;
            var var3 = /^[A-Z]{1}[A-Za-z0-9]{7,14}/;//确认密码


            if (var3.test(surePwd)) {
                //确认密码
                document.getElementById("regSurePwd").innerText = "正确";
                document.getElementById("regSurePwd").style.color = "green";
            } else {
                document.getElementById("regSurePwd").innerText = "请输入大写开头 数字字母符号混合 8-15位";
                document.getElementById("regSurePwd").style.color = "red";
            }
        }

        function regMailbox() {
            mailbox = document.getElementById("mailbox").value;
            var var4 = /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;//邮箱
            if (var4.test(mailbox)) {
                //邮箱
                document.getElementById("regMailbox").innerText = "正确";
                document.getElementById("regMailbox").style.color = "green";
            } else {
                document.getElementById("regMailbox").innerText = "请输入邮箱格式";
                document.getElementById("regMailbox").style.color = "red";
            }
        }

        function regPhone() {
            phone = document.getElementById("phone").value;
            var var5 = /0?(13|14|15|18|17|19)[0-9]{9}/;//手机号
            if (var5.test(phone)) {

                //手机号
                document.getElementById("regPhone").innerText = "正确";
                document.getElementById("regPhone").style.color = "green";
            } else {
                document.getElementById("regPhone").innerText = "请输入手机号格式";
                document.getElementById("regPhone").style.color = "red";
            }
        }

        function regCard() {
            card = document.getElementById("card").value;
            var var6 = /^[1-9]{1}[0-9]{17}$|[1-9]{1}[0-9]{16}(X|x)$/;//身份证号
            if (var6.test(card)) {
                //身份证号
                document.getElementById("regCard").innerText = "正确";
                document.getElementById("regCard").style.color = "green";
            } else {
                document.getElementById("regCard").innerText = "请输入身份证号格式";
                document.getElementById("regCard").style.color = "red";
            }
        }

        function regAddress() {
            address = document.getElementById("address").value;
            var var7 = /^[1-9]{1}[0-9]{17}$|[1-9]{1}[0-9]{16}(X|x)$/;//地址
            if (var7.test(address)) {
                //地址
                document.getElementById("regAddress").innerText = "正确";
                document.getElementById("regAddress").style.color = "green";
            } else {
                document.getElementById("regAddress").innerText = "请输入中文开头  数字 - 字母 中文混合";
                document.getElementById("regAddress").style.color = "red";
            }

    }
    function varReg(){
       regName();
        regPwd();
        regSurePwd();
        regMailbox();
        regPhone();
        regCard();
        regAddress();
    }
</script>
</body>
</html>

你可能感兴趣的:(用正则表达式实现的登陆注册页面)