埃隆马斯克-科技资讯-JinNianX

点击以下链接进入:
https://www.elonmusk.cn/

dom&Bom_07Day | 瑾年-JinNianX-瑾年的学习记录

dom&Bom_07Day


## 正则表达式

介绍

774

正则表达式(regular expression)是一种通过一系列描述信息编写模式,作用是通过这些信息,找到符合这些正则表达式条件的文本,从而做匹配,替换,截取等操作;正则表达式在js中也是对象。

使用场景

最常用的场景是表单验证,也是js最初诞生的作用。

775

语法

我们先定义规则,再去根据规则查找

776

那么如何定义规则呢?

777

/ /是正则表达式的字面量。变量名reg存储了一个正则对象,因为是对象。所以也可以用对象的方法提取里面的属性等。

现在找到怎么定义最基本的规则了,那么怎么查找呢,就要用到这个正则对象的一个方法test()

778

<script>
      let regular = /瑾年/
      let str ='这里是瑾年的学习博客'
      let str1 ='体验未知,探索未知'
      console.log( regular.test(str))     // true
      console.log( regular.test(str1))   //false
     	console.log( regular.test('瑾年never say never'))     // true
    //因为regular里面就是/前端/,所以可以直接下面这种方法
    	console.log( /前端/.test('瑾年never say never'))     // true
  </script>

exec方法

reg.exec()方法和reg.test()一样是正则对象的一个方法,不同的是,如果没有找到,它会返回null,如果找到它会返回一个数组包含了一些信息

779

元字符

上面的/瑾年/就是普通字符,指定了瑾年两个字

而元字符则是具有一些特殊含义,比如规定用户只能输入26英文字母,普通字符的话要abcdefg……

而元字符只需要写成[a-z]即可

在实际运用中,正则表达式一般直接复制粘贴,因为网上有绝大部分现成的规则,但学懂肯定更好。

780

https://tool.oschina.net/regex

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions

三种常用元字符

781

边界符

782

注意同时用^和$的精确匹配,只有开头结尾都是同一个字符,才是真

量词

量词是干嘛的呢,它是限定次数的,比如设置一个密码,你可以规定最大长度。

783

注意{n,m}这里面不要加空格

字符类

784

[abcdefg……..z]和连字符[a-z]是一样的效果,即用户必须包含里面的其中一个即可。

注意

1-这个正则表达式也是有优先级的,如这个腾讯的,{4,}只管的了[0-9]管不了[1-9],这段表达式的意思就是qq第一位必须是1-9,后续位必须等于或超过四个且是0-9

2- console.log(/^a?$/.test(‘’)) //true

这里为什么是true呢?不是a要是在开头也是结尾吗?空字符如何实现?

其实是理解错误了,这里可以/^a?$/看作/^(a?)$/ 其中a?的意思就是可以一个a或者0

个a,所以可以相当于/^$/,即空字符开头结尾,所以结果为true

后面的量词只对最近的字符类生效。

785

注意:上图的字符类加了边界符,必须开头和结尾,那么只有选其中一个字母的时候,才会成立,如234成立,15不成立。

[a-zA-Z]一般表示26个字母不区分大小写,即变成了52个字母任填也能过

[a-zA-Z0-9]就是可以输入数字字母都可以。

[a-zA-Z0-9-_]也可以加上短横线和下划线,这样用户也可以输入这两个字符做账户或密码

案例验证用户名

786

<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>
        .right {
            color: green;
        }

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

<body>
    <input type="text" name="" id="" placeholder="请输入您的账户名">
    <span></span>
    <script>
        let input = document.querySelector('input')
        let text = input.nextElementSibling
        input.addEventListener("blur", function () {
            if (/^[a-zA-Z0-9-_]{6,16}$/.test(input.value)) {

                text.innerHTML = "用户名可用"
                text.className = 'right'
            }
            else {
                text.innerHTML = "用户名必须大于6位小于16位"
                text.className = 'error'
                console.log(/^a-zA-Z0-9-_{6,16}$/.test(input.value))
                console.log(input.value)
            }
        })

    </script>
</body>

</html>

两个不同的^

787

原先学的肩括号是边界符一般加在最外面,如/^[a-z]$/

这里的^是取反符号,加在字符类里面,如/[ ^a-z]$/,这个的意思是除a-z以外的所有字符。

还有一个点. 是匹配除换行符之外的所有字符,如/^.{6,16}$/表示输入任意字符6-16个

字符类的更简洁写法

788

/^\d{4}-\d{2}-\d{2}$/这个的意思就算必须是2022-06-21这种格式,没错必须加上斜杠才算正确。

修饰符

789

修饰符是写在//的后面,如上的i表示不区分大小写,那么我test大写A也是得到true

g是global的意思,不仅限于选中符合正则表达式的第一个,而是匹配所有符合 条件的,下面的替换敏感词会用到。

修饰符的替换replace

790

这个意思就算从字符串里面找匹配正则表达式的内容,然后替换成其他文本。

案例过滤敏感词

791

792

1-这里的g是修饰符,如果不添加的话,如果文本有多个符合正则表达式的文本,如上的“激情”,那么只会替换一个。

2-如果要添加多个敏感词,用|隔开即可。

<body>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <p></p>
    <button>提交</button>
    <script>
        let textarea = document.querySelector('textarea')
        let p = textarea.nextElementSibling
        let btn = p.nextElementSibling
        btn.addEventListener('click', function () {

            p.innerHTML = textarea.value.replace(/逗逼|愚蠢/g, '大帅哥')
        })


    </script>
</body>

793

综合案例小兔仙表单验证

794

795

796

1-需求7那种单选框同意条款,我们自己一般做不成那么好看的效果,所以一般使用i标签通过iconfont类来渲染,使用ClassList.toggle()来实现。

2-需求八中,当所有的input中有一个是false,即不提交,需要用到e.preventDefault()来阻止默认事件。

799

其中注意,提交事件是写在form上面,而不是写在那个提交按钮上面,提交的是form不是按钮。

800

这个验证模块,即判断i标签有没有那个勾选的样式类名即可,用到了新知识,classList.contain(‘类名’),有返回true,没有返回fasle

在表单验证中,我们一般使用change事件而不是blur事件,只要当input内容value改变,再失去焦点就进行判断。

blur事件是失去焦点就判断,但是当用户根本没有输入,也判断了,实际开发中不需要这样。

还有一个input事件,只要输入就触发。

797

其中还可以用css属性选择器去选中不同的输入框,因为表单里不同的input的name肯定不一样,因为前后端交互,需要用name来交换数据。

798

问题:

1-点击获取验证码的按钮,直接页面刷新了,自然没了效果,困扰我很久。

原因:按钮如果是表单的<button>标签,如果没有指定type属性,则其type属性默认为type=submit。所以每次点击登录button后都会执行提交表单的操作,表单操作默认有刷新页面的功能

<!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>
        .container {
            margin: 0px auto;
            width: 600px;
            background-color: pink;
        }

        .container div {
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <form>
            <div class="username">
                <input type="text" placeholder="输入用户名" name="username">
                <span class="msg"> </span>
            </div>
            <div class="phone">
                <input type="tel" placeholder="输入手机号码" name="phone">
                <span class="msg"> </span>
            </div>
            <div class="verify_code">
                <input type="text" placeholder="短信验证码" name="verify_code">
                <button class="get_code_btn" type="button">获取验证码</button>
                <span class="msg">验证码正确 </span>
            </div>
            <div class="password">
                <input type="password" placeholder="请输入6-20位的字母,数字,符合组合" name="password">
                <span class="msg">密码格式正确</span>
            </div>
            <div class="password_confirm">
                <input type="password" placeholder="重复密码" name="password_confirm">
                <span class="msg">密码一致</span>
            </div>
            <div class="rules">
                <input type="radio" name="" id="" name="rules">
                已阅读并同意<i>《用户服务协议》</i>
            </div>
            <div class="submit">
                <button class="submit_btn">注册</button>
                <!-- <a class="submit" href="javascript:;">下一步</a> -->
            </div>
        </form>
    </div>
    <script>
        // 验证码
        let get_code_btn = document.querySelector('.get_code_btn')
        get_code_btn.addEventListener('click', function () {
            get_code_btn.innerText = `05s后重新获取`
            let num = 5
            let timer = setInterval(function () {
                num--
                get_code_btn.innerHTML = `0${num}秒后重新获取`
                if (num == 0) {
                    clearInterval(timer)
                    get_code_btn.innerHTML = `重新获取`
                }
            }, 1000)
        })
        // 验证用户名
        let username_value = document.querySelector('[name=username]')
        // 因为最后注册按钮也需要用到此验证函数,所以封装一下
        username_value.addEventListener('input', verifyUserName)
        function verifyUserName() {
            let reg = /^[a-zA-Z0-9-_]{6,10}$/
            let msg = username_value.nextElementSibling
            if (!reg.test(username_value.value)) {
                msg.innerHTML = '昵称长度为6到10个字符'
                // 这里为什么要返回false和true呢,因为注册按钮需要用到,只有所有验证都是true,才通过.
                return false
            }
            msg.innerText = '用户名可用'
            return true
        }
        // 验证手机号码
        let phone = document.querySelector('[name=phone]')
        phone.addEventListener('input', verifyUserphone)
        function verifyUserphone() {
            let reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
            let msg = phone.nextElementSibling
            if (!reg.test(phone.value)) {
                msg.innerHTML = '手机号码格式不正确'
                return false
            }
            msg.innerText = '手机号码可用'
            return true
        }


        // 其他的input验证如短信和密码都同上,换一下正则即可.

        // 注册按钮提交
        let form = document.querySelector('form')
        form.addEventListener('submit', function (ev) {
            if (!(verifyUserName() && verifyUserphone())) {
                console.log(verifyUserName())
                ev.preventDefault()
                alert('请正确输入所有信息')
            }

        })

    </script>
</body>

</html>

文章作者: 瑾年
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 周东奇 !
免责声明: 本站所发布的一切内容,包括但不限于IT技术资源,网络攻防教程及相应程序等文章仅限用于学习和研究目的:不得将上述内容用于商业或者非法用途,否则一切后果请用户自负。本站部分信息与工具来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如有侵权请邮件(jinnian770@gmail.com)与我们联系处理。
  目录