JS:表单登陆验证


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

 

原创文章,作者:kepupublish,如若转载,请注明出处:https://blog.ytso.com/274405.html

(0)
上一篇 2022年7月14日
下一篇 2022年7月14日

相关推荐

发表回复

登录后才能评论