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

原创已于 2022-07-14 23:02:06 修改 · 735 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

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

DOM 专栏收录该内容

4 篇文章

订阅专栏

这篇博客介绍了一个简单的前端邮箱验证和密码输入的实现。通过JavaScript代码，当用户点击登录按钮时，会检查邮箱输入是否符合正则表达式，如果格式正确，邮箱输入框边框变为绿色并隐藏错误提示；否则，边框变红并显示错误信息。此实现有助于提高用户输入的准确性。

 <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>