暑期学JavaScript【第六天】

Cyan青

已于 2023-07-05 10:02:04 修改

阅读量85

点赞数

分类专栏： JavaScript 文章标签： javascript 前端开发语言

于 2023-07-05 10:00:55 首次发布

本文链接：https://blog.csdn.net/qq_61832249/article/details/131549126

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、正则表达式

边界符
^：表示以后面字符开头
$：表示以前方字符结尾
量词
*:前面的字符至少出现0次
+:前面的字符至少出现1次
?:前面的字符出现0/1次
{n}:重复n次
{n,}:至少重复n次
{n,m}:重复n~m次
字符类

[ ]:代表字符集合

/^[a-z]$/

[ ^ ] 取反

[^a-z]匹配除a-z的字符

预定义类
修饰符
i：忽略大小写
g：全部匹配

/^abc/i.test('Abc')	//true
/^abc/g.test('abc123abc')	//全部匹配
str = 'abc123Abc'
str.replace(/abc/ig,'哈哈')
//哈哈123哈哈，返回新字符串

二、正则的使用

const regex = /^abc$/
regex.test('abc')
regex.exex('abcdefgabc')	// 返回一个数组

登录案例

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
    <link rel="stylesheet" type="text/css" href="login.css">
</head>

<body>
    <div class="box">
        <div class="nav">
            <a href="javascript:;" class="active">账户登录</a>
            |
            <a href="javascript:;">二维码登录</a>
        </div>
        <form class="user-login">
            <p>手机验证码登录</p>
            <div class="input">
                <span>🐷</span>
                <input type="text" placeholder="请输入用户名称">
            </div>
            <div class="input">
                <span>🔒</span>
                <input type="password" placeholder="请输入密码">
            </div>
            <div class="agree">
                <input type="checkbox">
                我已同意《<a href="#">服务条款</a>》和《<a href="#">服务条款</a>》
            </div>
            <button class="login">
                登录
            </button>
            <div class="footer">
                <a href="#">忘记密码?</a>
                <a href="#">免费注册</a>
            </div>
        </form>
        <div class="code-login">
            <img src="./JS基础/WebAPI/images/desktop_2.jpg" alt="">
            <p>请使用手机扫描二维码登录</p>
        </div>
    </div>
</body>
<script>

    const form = document.querySelector('form')
    const usrL = document.querySelector('.nav a:nth-child(1)')
    const code = document.querySelector('.nav a:nth-child(2)')
    const nav = document.querySelector('.nav')
    const usrlog = document.querySelector('.user-login')
    const codelog = document.querySelector('.code-login')
    form.addEventListener('submit', function (e) {
        const usr = document.querySelectorAll('.input input')
        const agree = document.querySelector('.agree input:nth-child(1)')
        // const regex = /^\w+$  | ^\d{11}$/
        const regex = /^\w+$/
        if (!(regex.test(usr[0].value) && usr[1].value !== '' )){
            console.log(usr[0].value);
            e.preventDefault()
            return alert('请完善账号密码！')
        }
        if(!agree.checked){
            e.preventDefault()
            return alert('请勾选同意')
        }
        alert('登录成功！')
        form.reset()
    })
    nav.addEventListener('click',function(e){
        if(e.target === usrL){
            document.querySelector('.active').classList.remove('active')
            usrL.classList.add('active')
            codelog.style.display = 'none'
            usrlog.style.display = 'block'
        }
        if(e.target === code){
            document.querySelector('.active').classList.remove('active')
            code.classList.add('active')
            codelog.style.display = 'block'
            usrlog.style.display = 'none'
        }
    })
</script>

</html>


* {
    margin: 0 auto;
    padding: 0 auto;
}
body {
    background-color: #ddd;
}
.box {
    width: 300px;
    height: 320px;
    padding: 20px 35px;
    background-color: #fff;
    text-align: center;
    margin-top: 100px;
    color: #CFCDCD;
}

a {
    text-decoration: none;
}
.nav {
    width: 100%;
    height: 50px;
    color: black;
    position: relative;
}
.nav a {
    padding-bottom: 5px;
    color: black;
    font-size: 20px;
}
.nav a:nth-child(1) {
    position: absolute;
    left: 0px;
}
.nav a:nth-child(2) {
    position: absolute;
    right: 0px;
}
.user-login {
    width: 100%;
}
.user-login p {
    text-align: right;
    color: #5fa094;
    cursor: pointer;
}
.code-login {
    display: none;
}
.login {
    width: 100%;
    height: 50px;
    background-color: #43b99a;
    color: white;
    line-height: 50px;
    border: #fff;
    cursor: pointer;
}

.input {
    border: 1px solid #17bb9b;
    width: 100%;
    height: 36px;
    margin-top: 17px;
    display: flex;
    background: #CFCDCD;

}
.input input {
    flex: 1;
    padding-left: 15px;
    background: #fff;
    outline: none;
    border: none;
}
.input span {
  width: 34px;
  height: 34px;
  text-align: center;
  line-height: 34px;
  font-size: 20px;
}
.agree {
    width: 100%;
    text-align: left;
    margin: 20px 0;
}
.agree a {
    color: #56606b;
}
.footer {
    margin-top: 10px;
    position: relative;
}
.footer a:nth-child(1){
    position: absolute;
    left: 0;
    color: black;
}
.footer a:nth-child(2){
    position: absolute;
    right: 0;
    color: black;
}
.active {
    border-bottom: 2px solid #17bb9b;
}
.code-login {
    width: 300px;
    height: 200px;
}
.code-login img {
    width: 100%;
    height: 100%;
    margin-bottom: 20px;
}