JS中的正则对象

最新推荐文章于 2024-07-28 20:27:10 发布

啊呜冷

最新推荐文章于 2024-07-28 20:27:10 发布

阅读量223

点赞数

分类专栏：前端文章标签： javascript 前端开发语言 Powered by 金山文档

本文链接：https://blog.csdn.net/Free_Pocket/article/details/129309625

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在JS中，正则对象通常被用来验证用户输入的信息是否正确进行初步筛选以此来减轻服务器的压力

创建对象

1-直接创建，不需要加引号（不是字符串）

var reg = /正则表达式/;

2-通过RegExp创建

var reg = new RegExp("正则表达式");

通常第一种使用的比较多，因为代码更简洁

函数

test(str) ：判断指定字符串是否符合规则，返回 true或 false

正则表达式

常用的规则：

^：表示开始

$：表示结束

[ ]：代表某个范围内的单个字符，比如： [0-9] 单个数字字符

. ：代表任意单个字符，除了换行和行结束符

\w：代表单词字符：字母、数字、下划线()，相当于 [A-Za-z0-9]

\d：代表数字字符：相当于 [0-9]

量词：

+：至少一个

*：零个或多个

？：零个或一个

{x}：x个

{m,}：至少m个

{m,n}：至少m个，最多n个

使用正则对象进行用户名、密码校验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <link href="../css/register.css" rel="stylesheet">
</head>
<body>
    <div class="form-div">
    <div class="reg-content">
    <h1>欢迎注册</h1>
    <span>已有帐号？</span> <a href="#">登录</a>
    </div>
    <form id="reg-form" action="#" method="get">
        <table>
            <tr>
                <td>用户名</td>
                <td class="inputs">
                    <input name="username" type="text" id="username">
                           <br>
<span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
                </td>
            </tr>
            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password" type="password" id="password">
                        <br>
 <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                </td>
            </tr>
            <tr>
                <td>手机号</td>
                <td class="inputs"><input name="tel" type="text" id="tel">
                    <br>
    <span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span>
                </td>
            </tr>
        </table>
        <div class="buttons">
            <input value="注 册" type="submit" id="reg_btn">
        </div>
            <br class="clear">
        </form>
        </div>
    <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;
        }     
        //1. 验证密码是否符合规则
        //1.1 获取密码的输入框
        var passwordInput = document.getElementById("password");
        //1.2 绑定onblur事件 失去焦点
        passwordInput.onblur = checkPassword;
        function checkPassword() {
        //1.3 获取用户输入的密码
        var password = passwordInput.value.trim();
        //1.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;
        }
        //1. 验证手机号是否符合规则
        //1.1 获取手机号的输入框
        var telInput = document.getElementById("tel");
        //1.2 绑定onblur事件 失去焦点
        telInput.onblur = checkTel;
        function checkTel() {
        //1.3 获取用户输入的手机号
        var tel = telInput.value.trim();
        //1.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;
        }
        //1. 获取表单对象
        var regForm = document.getElementById("reg-form");
        //2. 绑定onsubmit 事件
        regForm.onsubmit = function () {
        //挨个判断每一个表单项是否都符合要求，如果有一个不合符，则返回false
        var flag = checkUsername() && checkPassword() && checkTel();
        return flag;
        }
           </script>
    </body>
</html>