JavaScript的正则表达式RegExp对象

正则表达式对象（Regular Expression Object）用于表示和处理正则表达式。正则表达式是一种强大的文本处理工具，它使用一种特殊的字符串模式来匹配、查找或替换文本中的字符序列。正则表达式对象通常提供了一组方法和属性，用于执行与正则表达式相关的操作。

1、创建

在JavaScript中，你可以使用RegExp对象来表示正则表达式。有两种方式可以创建RegExp对象：

1. 使用字面量语法：

   var regex = /pattern/;

2. 使用构造函数：

   var regex = new RegExp('pattern');

2、规则

正则表达式常用的规则如下:

^	表示开始
$	表示结束
[ ]	代表某个范围内的单个字符，比如： [0-9] 单个数字字符
.	代表任意单个字符，除了换行和行结束符
\w	代表单词字符：字母、数字、下划线(_)，相当于 [A-Za-z0-9_]
\d	代表数字字符： 相当于 [0-9]

量词：

+	至少一个
*	零个或多个
？	零个或一个
{x}	x个
{m,}	至少m个
{m,n}	至少m个，最多n个

3、验证

使用正则对象的test()方法测试一个字符串是否匹配该正则表达式，或者使用exec()方法来获取匹配的结果。

举例：

// 规则：单词字符，6~12
//1,创建正则对象，对正则表达式进行封装
var reg = /^\w{6,12}$/;

var str = "abcccc";
//2,判断 str 字符串是否符合 reg 封装的正则表达式的规则
var flag = reg.test(str);
alert(flag);

应用举例：注册页面的表单校验

• 校验用户名：当用户名输入框失去焦点时，判断输入的内容是否符合 长度是 6-12 位 规则，不符合使 id='username_err' 的span标签显示出来，给出用户提示。
• 校验密码：当密码输入框失去焦点时，判断输入的内容是否符合 长度是 6-12 位 规则，不符合使 id='password_err' 的span标签显示出来，给出用户提示。
• 校验手机号：当手机号输入框失去焦点时，判断输入的内容是否符合 长度是 11 位 规则，不符合使 id='tel_err' 的 span标签显示出来，给出用户提示。
• 当用户点击注册按钮时，需要同时对输入的用户名、密码、手机号 ，如果都符合规则，则提交表单；如果有一个不符合规则，则不允许提交表单。实现该功能需要获取表单元素对象，并绑定 onsubmit事件。

<script>
    //1.验证用户名是否符合规则
    //1.1 获取用户名的输入框
    var usernameInput = document.getElementById("username");

    //1.2 绑定onblur事件 失去焦点
    usernameInput.onblur = checkUsername;

    function checkUsername() {
        //1.3 获取用户输入的用户名
        var username = usernameInput.value.trim();

        //1.4 判断用户名是否符合规则：长度 6~12,单词字符组成
        var reg = /^\w{6,12}$/;
        var flag = reg.test(username);

        //var flag = username.length >= 6 && username.length <= 12;
        if (flag) {
            //符合规则
            document.getElementById("username_err").style.display = 'none';
        } else {
            //不合符规则
            document.getElementById("username_err").style.display = '';
        }
        return flag;
    }

    //2. 验证密码是否符合规则
    //2.1 获取密码的输入框
    var passwordInput = document.getElementById("password");

    //2.2 绑定onblur事件 失去焦点
    passwordInput.onblur = checkPassword;

    function checkPassword() {
        //2.3 获取用户输入的密码
        var password = passwordInput.value.trim();

        //2.4 判断密码是否符合规则：长度 6~12
        var reg = /^\w{6,12}$/;
        var flag = reg.test(password);

        //var flag = password.length >= 6 && password.length <= 12;
        if (flag) {
            //符合规则
            document.getElementById("password_err").style.display = 'none';
        } else {
            //不合符规则
            document.getElementById("password_err").style.display = '';
        }
        return flag;
    }

    //3. 验证手机号是否符合规则
    //3.1 获取手机号的输入框
    var telInput = document.getElementById("tel");

    //3.2 绑定onblur事件 失去焦点
    telInput.onblur = checkTel;

    function checkTel() {
        //3.3 获取用户输入的手机号
        var tel = telInput.value.trim();

        //3.4 判断手机号是否符合规则：长度 11，数字组成，第一位是1
        //var flag = tel.length == 11;
        var reg = /^[1]\d{10}$/;
        var flag = reg.test(tel);
        if (flag) {
            //符合规则
            document.getElementById("tel_err").style.display = 'none';
        } else {
            //不合符规则
            document.getElementById("tel_err").style.display = '';
        
        return flag;
    }

    //验证表单
        //获取表单对象
    var regForm = document.getElementById("reg-form");

        //绑定onsubmit 事件
    regForm.onsubmit = function () {
        //分别判断每一个表单项是否都符合要求，如果有一个不合符，则返回false

        var flag = checkUsername() && checkPassword() && checkTel();

        return flag;
    }
</script>