JS：表单登陆验证

2022/7/14 23:20:23

编程Tag： js 验证表单 var style email querySelector document visibility

本文主要是介绍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>

这篇关于JS：表单登陆验证的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

JS：表单登陆验证

相关编程文章