JS学习笔记(day10)

最新推荐文章于 2024-05-23 12:02:30 发布

苦逼的猿宝

最新推荐文章于 2024-05-23 12:02:30 发布

阅读量92

点赞数 1

分类专栏： js 文章标签： html5 前端 javascript Powered by 金山文档

本文链接：https://blog.csdn.net/GAGGAAAAA/article/details/129190570

版权

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

js学习第十天(ES6)

一、字符串使用到正则表达式的方法

替换方法

字符串.replace(要替换内容, 替换后的内容)

字符串.replace(正则表达式, 替换后的内容)

search方法

字符串.search(字符串)

字符串.search(正则表达式)

match方法

字符串.match(字符串)

字符串.match(正则表达式)

二、let关键字

es6新增的声明变量的方式

let 变量名 = 数据

let和var的区别

let声明的变量不允许重复声明

let声明的变量不能够被预解析

let有块级作用域概念

块级作用域

花括号（代码块）里面范围就是块级作用域的范围

三、let和var的使用区别

    - let和var在全局或者局部作用域里面没有区别
    - let和var在块级作用域里面有区别
    + 用var在块级作用域里面定义的变量是全局变量
    + 用let在块级作用域里面定义的变量是块级变量

四、const 声明常量

+ 常量和变量
    - 变量的值是允许改变的
    - 常量的值是不允许改变的
    - const也有块级作用域概念

五、箭头函数

定义函数的方式

声明式

function 函数名(){}

赋值式

var 函数名 = function(){}

箭头函数

var 函数名 = ()=>{}

简写方式

如果函数体内只有一行代码可以省略花括号不写写到同一行默认有一个返回值的效果

当函数只有一个形参的时候小括号可以省略不写

六、模板字符串

<script>
        var str = `哈哈哈`
        console.log(str)
        console.log(typeof str)
        // 支持换行写
        var poem = '人生若只如初见，'
                +  '何事秋风悲画扇'

        var poem2 = `人生若只如初见，
                    何事秋风悲画扇。`

        // 可以在里面写变量
        var username = 'jack'
        var age = 18
        alert('我叫' + username + ',我今年' + age + '岁')
        alert(`我叫${username}，我今年${age}岁`)
    </script>

七、表单验证的方法

<!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>
    <style>
        body {
            font: 14px/28px "微软雅黑";
        }

        .contact *:focus {
            outline: none;
        }

        .contact {
            width: 700px;

            height: auto;

            background: #f6f6f6;

            margin: 40px auto;

            padding: 10px;
        }

        .contact ul {
            width: 680px;

            margin: 0 auto;
        }

        .contact ul li {
            border-bottom: 1px solid #dfdfdf;

            list-style: none;

            padding: 12px;
        }

        .contact ul li label {
            width: 120px;

            display: inline-block;

            /* float: left; */
        }

        .contact ul li input[type="text"],
        .contact ul li input[type="password"] {
            width: 220px;

            height: 25px;

            border: 1px solid #aaa;

            padding: 3px 8px;

            border-radius: 5px;
        }

        .contact ul li input:focus {
            border-color: #c00;
        }

        .contact ul li input[type="text"] {
            transition: padding 0.25s;

            -o-transition: padding 0.25s;

            -moz-transition: padding 0.25s;

            -webkit-transition: padding 0.25s;
        }

        .contact ul li input[type="password"] {
            transition: padding 0.25s;

            -o-transition: padding 0.25s;

            -moz-transition: padding 0.25s;

            -webkit-transition: padding 0.25s;
        }

        .contact ul li input:focus {
            padding-right: 70px;
        }

        .btn {
            position: relative;

            left: 300px;
        }

        .tips {
            color: rgba(0, 0, 0, 0.5);
            padding-left: 10px;
        }

        .tips_true,
        .tips_false {
            padding-left: 10px;
        }

        .tips_true {
            color: green;
        }

        .tips_false {
            color: red;
        }
    </style>
</head>

<body>
    <div class="contact">
        <form name="form1" method="post">
            <ul>
                <li>
                    <label>姓名：</label>
                    <input type="text" name="yourname" placeholder="请输入用户名" required /><span class="tips"
                        id="divname">长度1~12个字符</span>
                </li>
                <li>
                    <label>密码：</label>
                    <input type="password" name="yourpass" placeholder="请输入你的密码" required /><span class="tips"
                        id="divpassword1">密码必须6-12位的字母和数字组成</span>
                </li>
                <li>
                    <label>确认密码：</label>
                    <input type="password" name="yourpass2" placeholder="请再次输入你的密码" required /><span class="tips"
                        id="divpassword2">两次密码需要相同</span>
                </li>
                <li>
                    <label>电子邮箱：</label>
                    <input type="text" name="youremail" placeholder="请输入你的邮箱" required /><span class="tips"
                        id="divmail">请输入你的邮箱名</span>
                </li>
            </ul>
            <b class="btn"><input type="submit" value="提交" />
                <input type="reset" value="取消" /></b>
        </form>
    </div>
    <script>
        //获取input元素
        var nameInput = document.querySelector('input[name=yourname]')
        var passInput = document.querySelector('input[name=yourpass]')
        var passInput2 = document.querySelector('input[name=yourpass2]')
        var emailInput = document.querySelector('input[name=youremail]')

        var divname = document.getElementById('divname')   //获取名字的span 
        var divpassword1 = document.getElementById('divpassword1') //获取密码的span
        var divpassword2 = document.getElementById('divpassword2') //获取确认密码的span
        var divmail = document.getElementById('divmail')

        //给nameInput添加失去焦点事件 验证用户名
        nameInput.onblur = function () {
            var username = nameInput.value
            var regName = /^.{1,12}$/
            if (regName.test(username)) {
                // 验证正确
                divname.classList.remove('tips_false')
                divname.classList.add('tips_true')
                divname.innerText = '用户名格式正确'
            } else {
                divname.classList.add('tips_false')
                divname.classList.remove('tips_true')
                divname.innerText = '用户名的长度1~12个字符'
            }
        }

        //给密码passInput添加失去焦点事件,验证密码
        passInput.onblur = function () {
            var password1 = passInput.value
            // var regPassword1 = /^[a-zA-Z0-9]{6,12}$/
            var reg = new RegExp(/^(?![^a-zA-Z]+$)(?!\D+$){6,12}/)
            if(reg.test(password1)){
                divpassword1.classList.remove('tips_false')
                divpassword1.classList.add('tips_true')
                divpassword1.innerText = '密码正确'
            }else {
                divpassword1.classList.add('tips_false')
                divpassword1.classList.remove('tips_true')
                divpassword1.innerText = '密码为6~12个字母和数字'
            }
        }
           /*  if (regPassword1.test(password1)) {
                var regZM = /[a-zA-Z]/
                var regSZ = /\d/
                hasZM = false
                hasSZ = false
                for (var i = 0; i < password1.length; i++) {
                    if (regZM.test(password1[i])) {
                        hasZM = false
                    }
                    if (regSZ.test(password1[i])) {
                        hasSZ = false
                    }
                }
                divpassword1.classList.remove('tips_false')
                divpassword1.classList.add('tips_true')
                divpassword1.innerText = '密码正确'
            } else {
                divpassword1.classList.add('tips_false')
                divpassword1.classList.remove('tips_true')
                divpassword1.innerText = '密码为6~12个字母和数字'
            }
        }
 */
        //给确认密码添加失去焦点事件
        passInput2.onblur = function () {
            var password1 = passInput.value
            var password2 = passInput2.value
            var regPassword2 = /^[a-zA-Z0-9]{6,12}$/
            if (regPassword2.test(password2)) {
                var regZM = /[a-zA-Z]/
                var regSZ = /\d/
                hasZM = false
                hasSZ = false
                for (var i = 0; i < password2.length; i++) {
                    if (regZM.test(password2[i])) {
                        hasZM = false
                    }
                    if (regSZ.test(password2[i])) {
                        hasSZ = false
                    }
                }
                if(hasSZ && hasZM){
                   divpassword2.classList.remove('tips_false')
                    divpassword2.classList.add('tips_true')
                    divpassword2.innerText = '密码正确'
                }else{
                    divpassword2.classList.add('tips_false')
                divpassword2.classList.remove('tips_true')
                divpassword2.innerText = '密码为6~12个字母和数字'
                }  
            } else {
                divpassword2.classList.add('tips_false')
                divpassword2.classList.remove('tips_true')
                divpassword2.innerText = '密码为6~12个字母和数字'
            }
            if (password2 === password1 && password2 !== '') {
                divpassword2.innerHTML = '密码一致'
                divpassword2.classList.remove('tips_false')
                divpassword2.classList.add('tips_true')
            } else {
                divpassword2.innerHTML = '密码不一致'
                divpassword2.classList.remove('tips_true')
                divpassword2.classList.add('tips_false')
            }
        }

        //给邮箱添加失去焦点事件
        emailInput.onblur = function () {
            var divmailValue = emailInput.value
            var regEmail = /^\w+@[0-9a-zA-Z\.-]+\.([a-z]{2,6})$/
            if (regEmail.test(divmailValue)) {
                divmail.innerHTML = '邮箱正确'
                divmail.classList.remove('tips_false')
                divmail.classList.add('tips_true')
            } else {
                divmail.innerHTML = '邮箱格式不对'
                divmail.classList.remove('tips_true')
                divmail.classList.add('tips_false')
            }
        }

    </script>
</body>

</html>