js正则（判断）

这里为了方便学习呢，首先我们先来认识一下正则。

了解正则

    正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。
    正则表达式在代码中常被简写为regex,regexp或者RE。

我们可以自己定制自己需要的一些正则表达式，从了解正则创建开始。

1.给定的字符串是否符合正则表达式的过滤逻辑(称作“匹配”)。
2.可以通过正则表达式,从字符串中获取我们想要的特定部分。

• 通过new关键字创建正则

var box = new RegExp("hello", "ig");

• 省略new关键字创建正则

var box = RegExp("hello", "ig");

• 省略new关键字创建正则

var box = /hello/ig; alert(box); // /hello/gi;

此处是不是对ig、gi产生了疑问？

   没关系，我们马上来进行介绍。

正则表达式常用的修饰符

   i 忽略大小写 // g 全局匹配 // m 换行匹配（遇到换行字符，自动重新计算行首）

我们需要知道必会的正则元字符(如下图)

接下来需要了解正则的一些基本方法

• test方法;

    
    格式：正则.test(字符串);
    功能：在字符串中匹配正则是否存在;
    返回值：如果存在返回true
           如果不存在就返回false

     var str = "how aRe you";
     var box = /are/i;
     alert(box.test(str));
     // 该输出结果为true 说明存在。

• exec方法;

     格式：正则.exec(字符串)
     功能：在字符串中匹配正则是否存在;
     返回值：如果存在返回一个数组，数组里面存放着匹配的内容;
            如果不存在，返回null;

    var str = "how aRe you";
    var box = /are/i;
     alert(box.exec(str).length);
    // 该输出结果为1 说明存在。

好，接下来步入正题。

正则判断的案例

【注】可以参照上图进行比对理解

   1.验证邮政编码

 var box = /^[1-9]\d{5}$/;
            alert(box.test("100000")); // true
            alert(box.test("018000")); // false

   2.判断文件类型是否为压缩包（zip|rar|rg）

var box = /^\w+\.(zip|rar|rg)$/i;
            alert(box.test("1.zip"));
            alert(box.test("333.rar"));

   3.匹配一个字符串是纯中文组成的字符串

var box = /^[\u4e00-\u9fa5]+$/;
            alert(box.test("我是中国人为武汉加油"));

看了上述案例你是否对正则判断有了些许了解呢？

废话不多说，接下来我们看一个稍微复杂的案例，并且进行实际的应用吧~！

邮箱验证&密码强度验证

   开始之前，我们需要先了解一下邮箱验证的步骤以及密码强度验证的步骤

邮箱验证

      1.我们需要用到的事件
         失去焦点事件 onblur,当输入框失去焦点的时候开始进行判断
      2.一般邮箱的判断条件（我们这里参照163邮箱）
         长度范围：6~18个字符；
         邮箱地址：必须已英文字母开头；
         邮箱规范：必须由字符、数字和下划线组成；
  当我们所有条件都满足的时候，需要将提示信息修改为该邮件地址可注册，使得用户知道邮箱验证通过。

接下来我们开始编写代码

   body部分，一个简单的页面结构

<div id='div1'>
        <input id='username' type="text" placeholder="用户名" />
        <!-- span 用于提示信息 -->
        <span id='username_span'>6~18个字符，可使用字母、数字、下划线，需以字母开头</span>
        <input id='password' type="password" placeholder="密码" />
        <div id='test'>
            <span>弱</span>
            <span>中</span>
            <span>强</span>
        </div>
    </div>

我们从邮箱验证开始，首先获取到邮箱输入框以及提示信息span标签

window.onload = function () {
            var oUsername = document.getElementById("username");
            var oUsernameSpan = document.getElementById("username_span");

          
        }

给输入框添加失去焦点事件

oUsername.onblur = function () {}

添加正则判断（依据上述步骤开始进行编写正则判断）

oUsername.onblur = function () {
                //获取输入框的内容
                var oValue = oUsername.value;
                //1、判断用户名的长度6~18长度
                if (oValue.length < 6 || oValue.length > 18) {
                    oUsernameSpan.style.color = 'red';
                    oUsernameSpan.innerHTML = "！长度应为6~18个字符";

                    //2、判断首字符是否是字母
                } else if (/[^a-zA-Z]/.test(oValue[0])) {
                    oUsernameSpan.style.color = 'red';
                    oUsernameSpan.innerHTML = "！邮件地址必需以英文字母开头";

                    //3、判断所有的字符都是数字、字母和下划线组成  
                } else if (/\W/.test(oValue)) {
                    oUsernameSpan.style.color = 'red';
                    oUsernameSpan.innerHTML = "！邮件地址需由字母、数字或下划线组成";
                } else {
                    oUsernameSpan.style.color = 'green';
                    oUsernameSpan.innerHTML = '✅恭喜，该邮件地址可注册';
                }

}

看到这里呢，恭喜你第一个操作邮箱验证已经完全了解了，那么我们开始下一个操作

密码&密码强度验证

      1.我们需要用到的事件
         按键抬起事件 onkeyup,当按键抬起的时候进行判断。
      2.密码以及密码强度的判断条件
         长度范围：6~18个字符；
         强度设定：
                   强：纯大写字母 + 纯小写字母 + 纯数字；
                   中：两两进行组合；
                   弱：任意满足一种条件即可；
  当我们所有条件都满足的时候，需要将提示信息修改为该密码可以使用，使得用户知道密码验证通过。
那么同上，我们首先第一步需要获取到密码输入框、提示信息div标签以及显示密码强度的span标签

            var oPassword = document.getElementById("password");
            var oTest = document.getElementById("test");
            var aSpans = oTest.getElementsByTagName("span");

与邮箱验证不同的是我们需要添加的事件为onkeyup，当我们输入密码结束的时候（按键抬起）进行判断

oPassword.onkeyup = function () {}

接下来去添加判断条件（依据上述步骤开始进行编写正则判断）

             var oValue = oPassword.value; // 获取到输入框的值
             //1、判断密码输入长度是否满足>=6
             if (oValue.length < 6 || oValue.length > 18) {
                 oTest.style.display = 'none';
             } else {
                 oTest.style.display = 'block';

                 //取消上一次选中的节点的样式
                 for (var i = 0; i < aSpans.length; i++) {
                     aSpans[i].className = "";
                 }

                 //2、判断密码强度

                 if (/^\d+$/.test(oValue) || /^[a-z]+$/.test(oValue) || /^[A-Z]+$/.test(oValue)) {
                     aSpans[0].className = 'active';
                 } else if (/\d/.test(oValue) && /[a-z]/.test(oValue) && /[A-Z]/.test(oValue)) {
                     aSpans[2].className = 'active';
                 } else {
                     aSpans[1].className = 'active';
                 }

                }

看到这里，我们一个简单的正则判断操作就完成啦~！

以上就是对正则判断的一个简单介绍，先写这么多，以后还会陆续更新一些H5的知识。

如果看完之后对你有些许帮助的话，不妨点个关注~！