【Javacript】入门之正则匹配密码和邮箱

最新推荐文章于 2024-02-06 11:07:20 发布

夹心776655

最新推荐文章于 2024-02-06 11:07:20 发布

阅读量196

点赞数

分类专栏： js交互设计代码实例文章标签： javascript

本文链接：https://blog.csdn.net/qq_37086980/article/details/110956410

版权

代码实例同时被 2 个专栏收录

72 篇文章 3 订阅

订阅专栏

js交互设计

46 篇文章 0 订阅

订阅专栏

描述: 1.正则匹配密码

6-18
密码:
- 初级: 纯数字和纯字母
- 中级: 数字和字母的组合 , 首位必须是字母
- 高级: 数字和字母和特殊符号的组合, 首位是字母

代码实现

// 1.设置密码
var str = 'qwerty';
// 2.初级: 纯数字或者纯字母
var reg = /^\d{6,18}$|^[a-zA-Z]{6,18}$/;
console.log(reg.test(str));

// 2.中级: 数字和字母的组合  
// 首位必须是字母
var str1 = 'qwrtee555st';
var reg = /(?!^[a-zA-Z]{6,18}$)^[a-zA-Z][0-9a-zA-Z]{5,17}$/;
console.log(reg.test(str1));
// 3.高级： 数字和字母和特殊符号的组合, 首位是字母
var str2 = '5wert55tw2#***'
var reg = /(?!^[!/@#$%^&*()_+{}]{6,18}$)(?!^\d{6,18}$)(?!^[a-zA-Z]{6,18}$)^[a-zA-Z][0-9a-zA-Z!/@#$%^&*()_+{}]{5,17}$/;
console.log(reg.test(str2));

2. 正则匹配邮箱

邮箱: qq sina github google 163 189
qwer@qq sina189.com net edu
要匹配一整个字符串是否符合某个规则
jiaxin_123 .在正则表示除换行以外的任意一个字符
从特殊符号转换成字符需要加\

代码实现

 var str3 = '62455@qq.com';
 var reg = /^\w{3,}@[0-9a-zA-Z]{2,}\.(com|cn|net|edu)$/;
 console.log(reg.test(str3));

3.登录模拟实例(利用正则)

在这里插入图片描述

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面的验证</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #form{
            margin: 20px 0 0 10px;
        }
        input{
            outline:none;
            text-indent: 5px;
        }
        i{
            color:#FF514F;
        }
    </style>
</head>
<body>
    <form id="form">
        <p>
            请输入账号:
            <input type="text" name = "userId" id = "userId" autocomplete="off">
            <span></span>
            <i>*</i> 用户名以字母开头, 必须字母和数字的组合
        </p>
        <p>
            请输入密码:
            <input type="password" name = "password" id = "password" autocomplete="off">
            <span></span>
            <i>*</i> 必须字母和数字的组合 5--10
        </p>
        <p>
            请输入手机号:
            <input type="phonenumber" name = "phoneNumber" id = "phonenumber" autocomplete="off">
            <span></span>
        </p>
        <p>
            请输入邮箱:
            <input type="email" name = "email" id = "email" autocomplete="off">
            <span></span>
        </p>
    </form>
    <script>
        // 1.获取表单, input, span元素
        var form = document.getElementById('form');
        var inps = document.querySelectorAll('input');
        var spans= document.querySelectorAll('span');
        console.log(form, inps , spans);
        // 2.一边输入获取用户名的输入值 表单元素值的获取 form.name值.value
        // 用户名以字母开头, 必须字母和数字的组合6-18位
        var reg = /(?!^[a-zA-Z]{6,18}$)^[a-zA-Z][0-9a-zA-Z]{5,17}$/;
        // zc(0, reg);
        // 2.一边输入获取密码的输入值 表单元素值的获取 form.name值.value
        // 密码以字母开头, 必须字母和数字的组合5-10位
        var reg1 = /(?!^\d{5,10}$)(?!^[a-zA-Z]{5,10}$)^[0-9a-zA-Z]{5,10}$/;
        // zc(1,reg1);
        // 3.一边输入获取手机号的输入值 表单元素值的获取 form.name值.value
        // 手机号全部为数字, 位数在
        var reg2 = /^1[3-9]\d{9}$/;
        // zc(2, reg2);
        // 4.一边输入获取邮箱的输入值 表单元素值的获取 form.name值.value
        // 手机号全部为数字, 位数在11位, 第一位为1
        var reg3 = /^\w{3,}@[0-9a-zA-Z]{2,}\.(com|cn|net|edu)$/;
        // 调用正则
        // zc(3, reg3);

        // 每一个下标改变, 正则一一对应
        var arr = [reg, reg1, reg2, reg3];

        // 调用函数, 循环
        for(var i = 0; i < arr.length; i++){
            zc(i, arr[i]);
        }


        // 如果下标并非一个元素使用, 需要抽取下标
        function zc(index, reg){
            inps[index].onblur = function(){
                // 判断正则, 标记正确或者错误
                if(!reg.test(this.value)){
                    spans[index].innerHTML = '错误';
                    spans[index].style.color = '#FB1010';
                }else{
                    spans[index].innerHTML = '正确';
                    spans[index].style.color = '#3D850C';
                }    
            }
        } 
    </script>
</body>
</html>

夹心776655

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
【Javacript】入门之正则匹配密码和邮箱

描述: 1.正则匹配密码6-18密码:初级: 纯数字和纯字母中级: 数字和字母的组合 , 首位必须是字母高级: 数字和字母和特殊符号的组合, 首位是字母代码实现 // 1.设置密码 var str = 'qwerty'; // 2.初级: 纯数字或者纯字母 var reg = /^\d{6,18}$|^[a-zA-Z]{6,18}$/; console.log(reg.test(str)); //
复制链接

扫一扫