用js实现登录的简单验证

实现过程示意图
这里写图片描述

代码


<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>登录</title>
    <style>
        .ok {
            color: green;
            border: 1px solid green;
        }
        .error {
            color: red;
            border: 1px solid red;
        }
    </style>
    <script>
        //校验账号的格式
        function check_code() {
            console.log(1);
            //获取账号
            var code =
                document.getElementById("code").value;
            //校验其格式(\w字母或数字或下划线)
            var span =
                document.getElementById("code_msg");
            var reg = /^\w{6,10}$/;
            if(reg.test(code)) {
                //通过,增加ok样式
                span.className = "ok";
            } else {
                //不通过,增加error样式
                span.className = "error";
            }
        }
        function check_pwd(){
            console.log(2);
            var code2 =document.getElementById("pwd").value;
            var span2 =
                document.getElementById("pwd_msg");
            var reg2 = /^\w{6,10}$/;
            if(reg2.test(code2)) {
                span2.className = "ok";
            } else {
                span2.className = "error";
            }

        }
    </script>
    </head>
    <body>
        <form action="http://www.tmooc.cn">
            <p>
                账号:
                <input type="text" id="code" onblur="check_code()"/>
                <span id="code_msg">6-10位字母、数字、下划线</span>
            </p>
            <p>
                密码:
                <input type="text" id="pwd" onblur="check_pwd()" />
                <span id="pwd_msg">8-20位字母、数字、下划线</span>
            </p>
            <p><input type="submit" value="登录"/></p>
        </form>
    </body>
    </html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值