正则表达式

最新推荐文章于 2024-06-25 17:12:05 发布

我是打工人

最新推荐文章于 2024-06-25 17:12:05 发布

阅读量379

点赞数

文章标签：正则表达式前端 javascript

本文链接：https://blog.csdn.net/szydqq/article/details/125811189

版权

1.正则：字符串正确的规则

2.作用

①前端往往有大量数据效验工作，正则对象可以控制字符串的格式，从而境地服务器压力，提高程序运行效率

②正则表达式验证数据格式前端

服务器验证数值后端

③JS的正则表达式通常都围绕着表单验证

3.正则的创建

a.构造方法

语法：var reg = new RegExp("格式字符串",["修饰符"]);

b.字面量

var reg = /格式字符串/修饰符;

注意事项:

以下情况用构造方法创建正则（数组的建立）

var arr = ["heihei","haha","yingying"];

var reg = new RegExp(arr[0]);

3.正则的格式字符串

格式字符串:普通字符+特殊字符

①普通字符:普通的字符，看起来是什么就是什么

②特殊字符:拥有特殊含义的字符

a.单个字符

b.组合字符

c.各种括号

③至少包含

语法：使用 /内容/

//至少包含一个a

var reg = /a/;

//至少包含连续的5个a

reg = /aaaaa/;

④只能包含

语法：同时存在，同时消失，，， ^:正则开始，，，$:正则结束

//只能包含一个a
        reg = /^a$/;

        //只能包含3个a 
        reg = /^aaa$/;

        //以b开头  至少3个a  至多5个a
        reg = /^ba{3,5}$/;

        //  6个5
        reg = /^5{6}$/;

        //邮编   6位数字  
        reg = /^\d{6}$/;

        //定义一个由字母或数字或下划线组成的用户名   范围在6,18之间   
        reg = /^\w{6,18}$/;

        // 定义一个由字母或数字或下划线组成的用户名 但是首字母不为数字   
        reg = /^\D\w{5,17}$/; 

        //定义一个密码 至少6位
        reg = /^.{6,}$/;

        //  www.baidu.com
        reg = /^www\.baidu\.com$/;

        //写一个3+5
        //+:{1,}
        reg = /^3\+5$/;

        //以 13 或 15 开头的手机号
        // 或的表示方法
        // a. (xxx|xxx|xxx)
        reg = /^1(3|5)\d{9}$/;

        // b.[x1x2x3x4]
        reg = /^1[35]\d{9}$/;

        //只能是a-f和0-6的区间
        reg = /^[a-f][0-6]$/;

        //空格
        reg = /^\s$/;

        // [\u4e00-\u9fa5] 中文字符区间
        //两个中文
        reg = /^[\u4e00-\u9fa5]{2}$/;

        //除了
        //[^x1x2x3]
        reg = /^[^abc]$/;

4.密码强度的判断

规则：由数字，字母，其他字符构成，，纯数字，纯字母,纯其他字符为弱，，全都有为强，其他情况为中

<body>
    <input type="text" name="" id="">
    <button>验证</button>
</body>
</html>
<script>

    //至少包含
    var regNum = /\d+/;
    var regChar = /[a-zA-Z]+/;
    var regLetter = /[!@#$%]/;

    //只能
    var _regNum = /^\d+$/;
    var _regChar = /^[a-zA-Z]+$/;
    var _regLetter = /^[!@#$%]$/;

    var oBtn = document.querySelector("button");
    var oInput = document.querySelector("input");

    oBtn.onclick = function(){
        if(_regNum.test(oInput.value) || _regChar.test(oInput.value) || 
            _regLetter.test(oInput.value)){
            console.log("弱");
        }else if(regNum.test(oInput.value) && regChar.test(oInput.value) &&
            regLetter.test(oInput.value)){
            console.log("强");
        }else{
            console.log("中");
        }
    }
</script>

效果图：

5.表单的验证

表单：form

属性：①action:发送数据的地址，也就是服务器接收数据的文件

②method:数据提交的方式，与安全性和效率有关,get和post,默认为get

③get:安全性低，但效率高，携带数据量小

④post:安全性高，但效率低，携带数据量大

<body>
    <form action="ok.html" method="get">
        姓名:<input type="text"><br>
        密码:<input type="text"><br>
        <input type="submit" value="提交">
    </form>
</body> 
</html>
<script>
    var oF = document.querySelector("form");
    var oInputs = document.getElementsByTagName("input");

    oF.onsubmit = function(){
        var regName = /^\D\w{5,17}$/;
        var regPwd = /^.{6,}$/;

        if(!regName.test(oInputs[0].value)){
            return false;
        }

        if(!regPwd.test(oInputs[1].value)){
            return false;
        }

        return true;
    }
</script>

效果图：

6.焦点验证表单

<!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>
</head>
<body>
    <form action="ok.html" method="get">
        姓名:<input type="text"><span></span><br>
        密码:<input type="text"><span></span><br>
        <input type="submit" value="提交">
    </form>
</body> 
</html>
<script>
    var oF = document.querySelector("form");
    var oInputs = document.getElementsByTagName("input");
    var oSpans = document.getElementsByTagName("span");
    var flagName = false;
    var flagPwd = false;
    oInputs[0].onblur = function(){
        var regName = /^\D\w{5,17}$/;
        if(regName.test(this.value)){
            oSpans[0].innerHTML = "姓名格式正确";
            flagName = true;
        }else{
            oSpans[0].innerHTML = "姓名格式不正确";
            flagName = false;
        }
    }
    oInputs[1].onblur = function(){
        var regPwd = /^.{6,}$/;
        if(regPwd.test(this.value)){
            oSpans[1].innerHTML = "密码格式正确";
            flagPwd = true;
        }else{
            oSpans[1].innerHTML = "密码格式不正确";
            flagPwd = false;
        }
    }

    oF.onsubmit = function(){
        if(flagName && flagPwd){
            return true;
        }else{
            return false;
        }
    }
</script>

效果图：