HTML正则表达式

最新推荐文章于 2024-07-24 16:53:23 发布

智慧女孩不秃头&

最新推荐文章于 2024-07-24 16:53:23 发布

阅读量207

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/qq_45284063/article/details/117804980

版权

HTML登录页面设计

要求：

1、使用正则表达式验证邮箱

2、密码长度至少为6位且为字母与数字的组合

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录页面</title>
    <style>
        *{
            padding:0px;
            margin:0px;
        }
        #container{
        width:500px;
        height:500px;
        border:0px;
        text-align:center; 
        background-color:#f4faf5bb;
        position:absolute;
        left:450px;
        top:50px;
        border-radius:90%;
        /* 动画名字*/
        animation-name:turn;
         /* 动画持续时间 */
         animation-duration:3s;
        /* 动画延迟时间 */
        animation-delay:0.5s;
     }
     h2{
        color:rgba(0, 0, 0, 0.753);
        margin-top:70px;
     }
     p{
        text-align:center;
        margin-top:12px;
        margin-bottom:5px;
        font-size:12pt; 
        color:#0000006c;
     }
     .input1{
         width:250px;
         height:30px;
         border:none;
         outline:none;
         border-bottom: 1px solid #000;
         background-color:#f4faf52f;
         text-align:center;
         margin-bottom:5px;
     }
     .btn{
        width:100px;
        height:30px;
        background-color:#d84d16b6;
        text-align:center;
        color:white;
        border-radius:200px;
        border:none;
        outline:none;
        margin-top:15px;
     }
     a{
        font-size:10pt; 
     }
    a:link{color:rgba(11, 11, 12, 0.822)}     /*未被访问的链接 */
    a:visited{color:#b35cb3} /*已被访问的链接 */
    a:hover{color:#4169E1}   /*鼠标悬浮在上的链接 */
    a:active{color:rgb(197, 134, 82)}  /*鼠标点击激活链接 */ 
 
    @keyframes turn{
        0%{
        transform:rotateY(0deg);
            } 
        100%{
        transform:rotateY(360deg);
            } 
     }
    </style>
</head>
<body background="1.jpeg" style="background-repeat: no-repeat;margin-left: 10px;">
    <div id="container">
        <h2>立即登录<h2>
        <p>邮箱</p>
        <input class="input1" type="text" id="email">
        <p>密码</p>
        <input class="input1" type="password" id="pass" placeholder="密码长度至少为6位"><br>
        <a href="#">忘记密码？</a><br>
        <button class="btn" id="login" value="登录" onclick="login()">登录</button>
        <button class="btn" id="regist" value="注册" onclick="regist()">注册</button>
 
        <script>
            function login(){
             //验证邮箱
            var em=document.getElementById("email");
            var email=em.value;
            var regExp = new RegExp(/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/);
            if(!regExp.test(email)){
                alert("邮箱格式不正确");
                return false;
                }
            //验证密码
            var pass=document.getElementById("pass");
            var password=pass.value;
            var regExp1 = new RegExp(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/);
            if(!regExp1.test(password)){
                alert("密码格式不正确");
                return false;
                }else{
            if(localStorage.getItem("email")==email && localStorage.getItem("pass1")==password)
            {
           alert("登录成功！");
           window.location.href="跳转页面.html";
                }else{
                    alert("邮箱或密码不正确！");
                }
            }
            }
            function regist(){
                window.location.href="注册页面.html";
            }
            </script>    
 
    </div>  
    </body>
</html>