JavaScript5

九、正则表达式
9.1 表单验证
    用户名：<input type="text" id="username" />

    <span id="tip"></span> <!--存储提示信息 -->

    <br>

    <button id="btn" disabled="disabled">提交信息</button>

   

   

    <script>

      /*

        要求对输入的账号进行数据校验：

        1.长度为10-20之间

        2.必须以yyzy开头

        3.必须以2023结尾

        4.中间必须存在abcd字符串。

        5.必须是复杂账号（大写字母，小写字母，数字，特殊符号必须至少含有3项）

       

        需求如下：输入数据完成之后 失去焦点进行校验，如果校验通过则按钮恢复正常，反之给出相关的提示。

      */

     

      var input_username = document.getElementById("username");

      var span_text = document.getElementById("tip");

      var btn = document.getElementById("btn");

     

      input_username.onblur = function(){

        //第一步:获取文本值

        var username = input_username.value;

       

        if (username.length<10 || username.length>20) {

          span_text.innerText = "长度出现了问题";

          return ;//不是作为返回值 仅仅是作为跳出方法,节省时间 后续代码都不需要执行

        }

       

       

        if (!username.startsWith("yyzy")) {

          span_text.innerText = "不是以yyzy开头";

          return ;

        }

       

        if (!username.endsWith("2023")) {

          span_text.innerText = "不是以2023结尾";

          return ;

        }

       

        if (username.indexOf("abcd")==-1) {

          span_text.innerText = "用户名没有包含abcd";

          return ;

        }

       

        let a1 = false;//表示是否包含大写字母  

        let a2 = false;//表示是否包含小写字母  

        let a3 = false;//表示是否包含数字  

        let a4 = false;//表示是否包含特殊符号  

       

        for(let i = 0 ;i<username.length;i++){

          if(  username.charAt(i)>='A' &&  username.charAt(i)<='Z'    ){

              a1 = true;

          }else if(  username.charAt(i)>='a' &&  username.charAt(i)<='z'    ){

              a2 = true;

          }else if(  username.charAt(i)>='0' &&  username.charAt(i)<='9'    ){

              a3 = true;

          }else{

              a4 = true;

          }

        }

       

        if(a1+a2+a3+a4<3){

          span_text.innerText = "复杂度不够";

          return ;

        }

       

       

        span_text.innerText = "√";

       

        btn.removeAttribute("disabled");

       

      }

     

     

     

      input_username.onfocus = function(){

      span_text.innerText = "";

     

      btn.setAttribute("disabled","disabled");

     

     

      }

    </script>

   

9.2 正则表达式简介
// 正则表达式（Regular Expression）是一种描述字符串规律的表达式，

      // 可以迅速地用极简单的方式达到字符串的校验控制。

     

      //符合一个正确的规则的表达式

     

      // 正则表达式的应用：常用于数据校验，过滤敏感词  等等

     

     

      //如何创建正则表达式:

      //方法1  直接声明  注意 任何情况下不要加引号

      // var reg1 = /aa/bb ;     //reg不仅有注册的意思 还有正则表达式的意思

     

     

      //方法2:通过new声明   该放引号就放引号

      // var reg2 = new RegExp("aa","bb");

     

      //一般情况下使用方法1

     

      //解释正则表达式的参数是什么意思

       // 第一个参数，用于描述字符串特征，例如以什么开头，以什么结尾，包含什么字符。

       // 第二个参数，用于描述额外的功能，例如是否忽略大小写(i)。是否全局匹配(g) 可以省略

       //全局匹配的意思:  一般情况下 匹配到一个就停止了.

       //例如

       // var str = "aabbcc";//现在需要将a替换成你

       // console.log(str.replace("a","你"));//你abbcc

       

       // 第一种方法

       // var reg1 = /ab/;

       // // 第二种方法

       // var reg2 = new RegExp('ab');

       

       // //上述代码的意思 判断字符串是否包含 ab

       

       // //如何去判断 通过正则表达式的test方法  即可

       // var str = "你好123abacd";

       // console.log(reg1.test(str))//true

       

      // var reg = /ab/;

      // console.log(reg.test('abcd')); // 输出结果：true

      // console.log(reg.test('dcba')); // 输出结果：false

      // console.log(reg.test('Abcd')); // 输出结果：false

      //一般来说都是通过test方法来判断字符串是否符合要求

      //其中还有一个方法也可以判断但是用的比较少  

     

      // var reg = /ab/;

      // console.log(reg.exec('cdab'));

      // console.log(reg.exec('dcba'));

      // console.log(reg.exec('Abcd'));

       // 不同的是：返回值。exec返回的是一个数组，如果不匹配返回一个null。

       // 如果匹配就返回出现的下标等。

9.3 正则表达式的元字符
     

      // 之前的写法太过于局限性。a只能代表a，b只能代表b。

     

     

      // 元字符是具有特殊含义的字符，例如[a-z]就表示所有小写字母

     

     

      //第一个元字符  .   表示任意字符

      // 例如    

      // var reg = /a./;

      // var str = "qwerta~";

      // console.log(reg.test(str));

     

     

      // //第二个元字符    ^   表示以什么开头  必须放在第一个

     

      // var reg = /^yyzy/;

      // var str = "yyzy123";

      // console.log(reg.test(str));

     

     

      //第三个元字符    $   表示以什么结尾  必须放在最后第一个

     

      // var reg = /yyzy$/;

      // var str = "yyzy123yyzy";

      // console.log(reg.test(str));

     

     

      //元字符之间是可以统一使用的

      // var reg = /^2023yyzy$/;这里的语法表示必须是2023yyzy  这里还不完善

      // var str = "2023yyzy";

      // console.log(reg.test(str));

     

     

      //下面两种写法的区别   i表示忽略大小写

     

      // var reg1 = /^ab$/i;//必须是ab

      // var reg2 = /ab/i;//只要包含ab即可

     

     

      //元字符之间是可以统一使用的

      // var reg = /^2023...yyzy$/;

      // var str = "2023ab啊yyzy";

      // console.log(reg.test(str));

     

     

     

     

      // 正则表达式中的“[]”表示一个字符集合，

      // 只要待匹配的字符   符合字符集合中的某一项，即表示匹配成功。  

     

      //需要校验的字符串 必须要包含a或d或1或z

      // var reg = /[ad1z]/;

      // console.log(reg.test("aaaaa"));

     

      //常见的字符串集合

      // var reg = /[a-z]/;

      // var reg = /[A-Z]/;

      // var reg = /[0-9]/;

      // var reg = /[a-zA-Z0-9]/;//所以非符号的字符

     

     

     

      // // 分别叙述两种写法的区别

      // var reg1 = /[abc123]/i;  //字符串中只要包含abc123 6个中的任意1个 即可

      // var reg2 = /abc123/i;    //字符串必要包含abc123的整体

     

     

      // 注意连字符必需要结合中括号一起使用

      // 分别叙述两种写法的区别。

      // var reg1 = /[a-z]/i;

      // var reg2 = /a-z/i;

     

      // 当需要匹配某个范围外的字符时，可以在“[”的后面加上“^”，

      // 此时“^”不再表示定位符，而是反义符，表示某个范围之外。

      // 分别叙述两种写法的区别

      // var reg1 = /^[a-z]/i;//必须是开头有一个字母

     

      // var reg2 = /[^a-z]/i;//必须包含非字母的

     

     

     

     

     

      //限定符  表示只允许出现的次数

     

      // var  reg1 = /a{6}/;

      // console.log(reg1.test("aaaaaab"))

     

     

     

      //必须是6个数字开头 然后紧紧跟着1~5个字母即可

      // var reg1 = /^[0-9]{6}[a-z]{1,5}[0-9]{1}$/i;

     

      // console.log(reg1.test("123456abf1"))
 

      //模拟需求  实现敏感词的过滤

      // var reg = /[习法西斯]/g;

      // var str = "你好作者。法西斯XX啊啊法国XX";

     

      // console.log(str.replace(reg,"*"));//你abbcc
————————————————