简单的表单（QQ邮箱及密码登陆）正则验证

Princess_ya

已于 2022-07-14 23:02:06 修改

阅读量616

点赞数

分类专栏： DOM 文章标签：前端 javascript

于 2022-07-14 22:55:40 首次发布

本文链接：https://blog.csdn.net/Princess_ya/article/details/125794625

版权

DOM 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

 <style>
        #p1 {
            /* display: none; */
            /* visibility: visible; */
            visibility: hidden;
            color: red;
        }

        button {
            width: 100px;
            height: 30px;
            margin-top: 10px;
            margin-left: 60px;
        }
    </style>
    <div>
        email:&nbsp;&nbsp;<input type="text" id="email" placeholder="请输入邮箱"> <br>
        <p id="p1">邮箱格式错误,请重新输入</p>
        pwd:&nbsp;&nbsp;<input type="password" id="pwd" placeholder="请输入密码"> <br>
        <button id="btn">登录</button>
    </div>

    <script>
        /* 
        1、分别获取登陆按钮、输入框节点
        2、用正则表达式来判断输入邮箱是否符合格式
        3、给按钮绑定点击事件
        4、.test判断用户输入值是否匹配
           4.1、如匹配输入框的边框变为绿色，并且提示用户输入信息错误的文字隐藏
           4.2、如不匹配输入框的边框变为红色，并且提示用户输入信息错误
        */
        var btn = document.getElementById("btn")
        btn.onclick = function () {

            var email = document.getElementById("email")
            var emailValue = email.value
            var pwd = document.getElementById("pwd").value
            var emailreg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/

            if (emailreg.test(emailValue)) {

                email.style.border = "2px solid green"
                document.querySelector('#p1').style.visibility = 'hidden'
            } else {
                email.style.border = "2px solid red"
                document.querySelector('#p1').style.visibility = 'visible'

                //这里使用visibility是因为占文档流位置，而display:none不占文档流位置
            }
        }



    </script>