暑期学JavaScript【第六天】

一、正则表达式

  1. 边界符
    ^:表示以后面字符开头
    $:表示以前方字符结尾
  2. 量词
    *:前面的字符至少出现0次
    +:前面的字符至少出现1次
    ?:前面的字符出现0/1次
    {n}:重复n次
    {n,}:至少重复n次
    {n,m}:重复n~m次
  3. 字符类
  • [ ]:代表字符集合
/^[a-z]$/
  • [ ^ ] 取反
[^a-z]匹配除a-z的字符
  1. 预定义类
    暑期学JavaScript【第六天】_第1张图片
  2. 修饰符
    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>Documenttitle>
    <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;
}

你可能感兴趣的:(JavaScript,javascript,前端,开发语言)