首页 > 其他分享> > JS：表单登陆验证

JS：表单登陆验证

2022-07-14 21:36:35 作者：互联网

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
</head>

<body>
    <style>
        #p1, #p2 {
            visibility: hidden;
        }
    </style>

    <div>
        email <input type="text" id="email">
        <p id="p1">邮箱格式错误</p>
        password <input type="password" id="pwd">
        <p id="p2">邮箱或密码错误</p>
        <button id="btn">登录</button>
    </div>

    <script>
        var btn = document.getElementById('btn');
        btn.onclick = function () {
            var email = document.getElementById('email');
            var emailv = email.value;
            var pwd = document.getElementById('pwd').value;
            console.log(emailv,pwd);
            var emailvreg=/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
            var pwdreg=/[A-Za-z0-9]/;
            if(emailvreg.test(emailv)&&pwdreg){
                document.querySelector('#p1').style.visibility='hidden';
                document.querySelector('#p2').style.visibility='hidden'
                alert("登录成功");
            }else{
                document.querySelector('#p2').style.visibility='visible';
                document.querySelector('#p1').style.visibility='visible';
            }
        }
    </script>
</body>

</html>

标签：style,验证,JS,visibility,表单,querySelector,var,document,email
来源： https://www.cnblogs.com/LIXI-/p/16479365.html