正则表达式完成验证

最新推荐文章于 2024-07-11 17:28:05 发布

mitara

最新推荐文章于 2024-07-11 17:28:05 发布

阅读量125

点赞数

分类专栏：被迫营业文章标签： js css html

本文链接：https://blog.csdn.net/mitara/article/details/117752568

版权

被迫营业专栏收录该内容

7 篇文章 0 订阅

订阅专栏

被迫营业的第7天

任务内容：登录页面
要求：
1. 使用正则表达式验证邮箱
2. 密码长度至少为6位且为字母与数字的组合

展示：

html代码：

<!DOCTYPE html>
<html lang="Cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页</title>
    <link rel="stylesheet" href="./css/Login.css">
</head>
<body>
    <div id="body">
        <form id="form" action="" autocomplete="off">
            <div id="login">
                <b>立即登录</b>
                <span>邮箱</span>
                <input name="email" type="email">
                <span>密码</span>
                <input name="passwd" placeholder="密码长度至少6位" type="password">
                <a href="">忘记密码？</a>
                <div id="btn">
                    <button type="button" onclick="login()">登录</button>
                    <button type="button" onclick="sign()">注册</button>
                </div>
            </div>
        </form>
    </div>
    <script src="./js/Login.js"></script>
</body>
</html>

css代码：

body{
    background-image: url("../img/bg04.jpeg");
    background-repeat: no-repeat;
    margin: 0px;
    padding: 0px;
    background-size: 100% 100%;
    height: 100vh;
}
#body{
    height: 60vh;
    width: 60vh;
    background-color: #fff;
    opacity: 0.8;
    margin: 0px auto;
    position: relative;
    top: 20vh;
    border-radius: 50%;
    box-shadow: 0px 0px 10px #fff;
    animation: overturn 1s linear 1s 1 normal none;
}
@keyframes overturn {
    0%{
        transform: rotateY(0deg);
    }
    50%{
        transform: rotateY(180deg);
    }
    100%{
        transform: rotateY(0deg);
    }
}
#login{
    width: 40vh;
    height: 40vh;
    margin: 0px 10vh;
    position: relative;
    top: 10vh;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    color: #182728;
}
#login > *:not(input){
    flex: 1;
}
#login > b{
    font-size: 20px;
    margin-bottom: 1em;
}
#login > input{
    padding: 0px;
    border-width: 0px;
    outline: none;
    border-bottom: 2px solid #1A292A;
    text-align: center;
    margin-bottom: 1em;
    opacity: 0.8;
    background-color: #fff;
}
#login > a{
    color: #905352;
    font-size: 12px;
}
#btn > button{
    color: #fff;
    background-color: #F88B1C;
    border-radius: 1em;
    padding: 0.25em 1.8em;
    border-width: 0px;
    box-shadow: 2px 2px 2px #8F676C;
}

js代码：

function login(){
    var email=document.getElementsByName('email')[0].value;
    var passwd=document.getElementsByName('passwd')[0].value;
    if(!(/^\d+@[a-zA-Z]+.[a-zA-Z]{2,}$/i.test(email))){
        alert('邮箱地址有问题哦！');
        return;
    }
    if(passwd.length<6){
        alert('密码长度至少6位!');
    }
    else{
        window.location.replace('Flickr.html');
    }
}

function sign(){
    window.location.href='Sign.html';
}