JS：表单登陆验证

2022-07-14 21:36:35 阅读：320 来源： 互联网

标签：style 验证 JS visibility 表单 querySelector var document email

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JS：表单登陆验证