模拟百度注册表单验证

最新推荐文章于 2022-07-27 11:24:15 发布

边城乌苏

最新推荐文章于 2022-07-27 11:24:15 发布

阅读量1.2k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_44687727/article/details/102950974

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

模拟百度注册表单验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;

        }
        .box{
            /* width: 600px; */
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;

        }
        label{
            display: flex;
            height: 60px;
            align-items: center;
            position: relative;
        }
        input{
            width: 300px;
            height: 35px;
            box-sizing: border-box;
            padding-left: 15px;
            color:#444;
        }
        span{
            padding-right: 20px;
            width: 100px;
            text-align: right;
            font-weight: 900;
        }
        .code{
            width: 150px;
        }
        label a{
           width: 140px;
           margin-left: 10px;
           height: 33px;
           border: 1px solid #ddd;
            color:#666;
            text-decoration: none;
            text-align: center;
            line-height: 33px;
            font-size: 14px;
           background-color: #f7f7f7;
        }
        em{
            color:#1b66c7;
            font-style: normal;
        }
        p{
            font-size: 12px;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            padding-left: 120px;
        }
        input[type=checkbox]{
            width: 12px;
            margin-right: 6px;
        }
        button{
            border: none;
            outline: none;
            color:#fff;
            line-height: 50px;
            margin-left: 120px;
            width: 350px;
            height: 50px;
            background-color: #4490f7;
        }
        i{
            position: absolute;
            color:#aaa;
            font-size: 12px;
            font-style: normal;
            bottom: 15px;
            left: 430px;
            display: none;
        }
        b{
            width: 200px;
            height: 28px;
            align-items: center;
            font-weight: normal;
            position: absolute;
            color:red;
            font-size: 12px;
            font-style: normal;
            bottom: 16px;
            left: 430px;
            padding-left: 20px;
            /* background-image: url(./images/err_small.png); */
            background-position: left center;
            background-repeat: no-repeat;
            display: none;
        }
        ul{
            position: absolute;
            left: 430px;
            padding-left: 10px;
            list-style: circle;
            width: 200px;
            height: 70px;
            border: 1px solid #ccc;
            background-color: #f7f7f7;
            list-style-position: inside;
            /* display: flex; */
            display: none;
            flex-direction: column;
            justify-content: center;
            align-content: space-between;
        }
        li{
            line-height: 20px;
            font-size: 12px;
            color: #333;
        }
        input:focus + i{
            display: block;
        }
        input:focus + ul{
            display: flex;
        }
    </style>
</head>
<body>
    <!-- focus获取焦点   blur失去焦点 -->
    <!-- 失去焦点 的时候  判断 用户名是否符合规则
        符合    加一个绿色的背景图  然后把 b 标签的内容 清空
        不符合  加一个红色的背景图  然后 innerText = "用户名仅支持中英文、数字和下划线,且不能为纯数字"
        获取焦点 
            让那个 b 标签隐藏 
    
    -->
        <div class="box">
            <label>
                <span>用户名</span>
                <input type="text" placeholder="请设置用户名" id="uname" autofocus>
                <i>设置后不可更改<br>用户名由数字字母下划线组成,最多14个字符</i>
                <b></b>
            </label>
            <label>
                <span>手机号</span>
                <input type="text" placeholder="可用于登录和找回密码" id="phone">
                <i style="bottom: 24px;">请输入中国大陆手机号,其他用户不可见</i>
                <b>手机号格式不正确</b>
            </label>
            <label>
                <span>密码</span>
                <input type="password" placeholder="请设置登录密码" id="pwd">
                <ul>
                    <li>长度为8~14个字符</li>
                    <li>支持数字,大小写字母和下划线</li>
                    <li>不允许有空格</li>
                </ul>
                <b>密码格式不正确</b>

            </label>
            <label>
                <span>验证码</span>
                <input type="text" placeholder="请输入验证码" class="code">
                <a href="#">获取短信验证码</a>
            </label>
            <p><input type="checkbox">阅读并接受<em>《百度用户协议》及《百度用户手册》</em></p>
            <button>注册</button>
        </div>

        <script src="../js/utils.js"></script>
        <script>
            var uname = my$("uname"),
                phone = my$("phone"),
                pwd = my$("pwd"),
                // nameReg = /^[a-zA-Z_][0-9a-zA-Z_]{0,13}$/
                nameReg = /^\w{1,14}$/,
                phoneReg = /^1[3456789]\d{9}$/
            // on(uname,"focus",function(){
            //     var ele = this.nextElementSibling.nextElementSibling
            //     css(ele,"display","none")
            // })
           
            function focusFn(_this){
                var ele = _this.nextElementSibling.nextElementSibling
                css(ele,"display","none")
            }
            on(uname,"focus",function(){
                focusFn(this)
            })
            on(phone,"focus",function(){
                focusFn(this)
            })
            function blurFn(reg,errStr,that){
                // 判断输入框里面的值 是否符合规则
                // console.log(this.value)
                var str = that.value
                var ele = that.nextElementSibling.nextElementSibling
                // console.log(ele)
                if(reg.test(str)){
                    // 让 b 标签显示绿色图标 并且没有文字
                    css(ele,"display","block")
                    css(ele,"backgroundImage","![在这里插入图片描述](https://img-blog.csdnimg.cn/20191107111550769.png)")
                    css(ele,"backgroundSize","20px")
                    ele.innerText = ""
                }else{
                    // 显示红色图标和那一段文字
                    // console.log("不符合");
                    css(ele,"display","block")
                    css(ele,"backgroundImage","![在这里插入图片描述](https://img-blog.csdnimg.cn/20191107111526962.png))")
                    css(ele,"backgroundSize","16px")
                    ele.innerText = errStr
                }
            }
            on(uname,"blur",function(){
                blurFn(nameReg,"用户名仅支持中英文、数字和下划线,且不能为纯数字",this)

            })
            
            on(phone,"blur",function(){
                blurFn(phoneReg,"手机号码格式不符合",this)
            })
        </script>
</body>
</html>

边城乌苏

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
模拟百度注册表单验证

模拟百度注册表单验证<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...
复制链接

扫一扫