发布于 由kailjava

前端 – 4 – 正则表达式表单验证实例

title: 正则表达式表单验证实例
toc: true
comments: true
tags: 前端
abbrlink: dd22a738
date: 2021-06-04 22:22:54
categories:

html+css+js简单实现正则表达式表单验证 !

[TOC]

(一)基本元字符

/*常用的元字符*/
//=>1. 量词元字符: 设置出现的次数
* 零到多次
+ 一到多次
? 零次或者一次
{n} 出现n次
{n, }出现n到多次
{n, m} 出现n到多次

//=>2. 特殊元字符: 单个或者组合在一起代表特殊的含义
 转义字符(普通->特殊->普通)
. 除n(换行符)以外的任意字符
^ 以哪一个元字符作为开始
$ 以哪一个元字符作为开始
n 换行符
d 0~9之间的一个数字
D 非0~9之间的一个数字(大写和小写的意思是相反的)
w 数字,字母,下划线中的任意一个字符
s 一个空白字符(包含空格,制表符,换页符等)
t 一个制表符(一个TAB键: 四个空格)
b 匹配一个单词的边界
x|y x或者y中的一个字符
[xyz] x或者y或者z中的一个字符
[^xy] 除了x/y以外的任意字符
[a-z] 指定a-z这个范围中的任意字符 [0-9a-zA-Z]===w
[^a-z] 上一个的取反"非"
() 正则中的分组符号
(?:) 只匹配不捕获
(?=) 正向预查
(?!) 负向预查

//=>3. 普通元字符: 代表本身含义的
/zhufeng/ 此正则表达式匹配的就是"zhufeng"
/*正则表达式常用的修饰符: img*/
i => ignoreCase 忽略单词大小写匹配
m => multiline 可以进行多行匹配
g => global 全局匹配

/*
/A/.test('lalala') => false
/A/i.test('lalala') => true
*/
  • 注意正则表达式中不要出现空格，因为空格也会被算作是一个字字符去进行匹配
  • 匹配的顺序也很重要，如果你匹配的一部分是或的逻辑，那么就应该将最详细的放在前面
    如：
    (nd+.d+.d+)|(nd+.d+)|(nd+)

匹配前：

image-20211016113736810

匹配后：

image-20211016113818381

如果将顺序倒过来：

    (nd+)|(nd+.d+)|(nd+.d+.d+)

匹配结果：

image-20211016114001530

可以看到，匹配后结果只匹配并替换了(nd+),而导致后面的两个或条件没有匹配到

(二)登录框用户名,密码验证

显示结果：

  1. 写内容

1.1 写容器以及把整个页面分为标题,主体,页脚三部分

        <div id="container">
            <div id="title"></div>
            <div id="body"></div>
            <div id="footer"></div>
        </div>

1.2 标题部分:

        <div id="container">
            <div id="title">账户登录</div>
        </div>

1.3 再加上两个输入框以及一个按钮

            <div id="body">
                <input id="yhm" placeholder="html请输入用户名" />
                <input id="pwd" type="password" placeholder="请输入您的密码" />
            </div>
            <button>登录</button>

1.4 另外, 还要校验做输入后判断的提示信息, 这里如果输入内容合法, 就在右边显示一个小勾的图片, 当然, 未输入或输入错误是不会显示的, 所以我们先不给它的src内容

        <div id="container">
            <div id="title">账户登录</div>
            <div id="body">
                <input id="yhm" placeholder="请输入用户名" />
                <img id="yhmR" src="" alt="" />
                <input id="pwd" type="password" placeholder="请输入您的密码" />
                <img id="pwdR" src="" alt="" />
            </div>
            <button>登录</button>
        </div>

1.5 然后就是输入不正确时的提示

        <div id="container">
            <div id="title">账户登录</div>
            <div id="body">
                <input id="yhm" placeholder="请输入用户名" />
                <img id="yhmR" src="" alt="" />
                <div id="yhmC"></div>
                <input id="pwd" type="password" placeholder="请输入您的密码" />
                <img id="pwdR" src="" alt="" />
                <div id="pwdC"></div>
            </div>
            <button>登录</button>
        </div>
  1. 写内容显示的效果

2.1 容器显示效果

        #container{
            width: 200px;
            height: 170px;
            padding: 15px;
            text-align: center;
            margin: 0 auto;
            background-color: white;
        }

2.2 标题部分

        #container{
            width: 200px;
            height: 170px;
            padding: 15px;
            text-align: center;
            margin: 0 auto;
            background-color: white;
        }

        #title{
            color: red;
            position: relative;
        }

2.3 主体部分以及按钮

        #body > input{
            margin-top: 20px;
            width: 150px;
            height: 20px;
            border: 1px solid gray;
            outline: none;
            padding-left:20px;
        }       

        #body > div{
            height: 10px;
            color: red;
            font-size: 10px;
        }   

        img{
            height: 10px;
            color: red;
            font-size: 10px;
        }
        button{
            width: 100px;
            height: 25px;
            background-color: red;
            margin-top: 20px;
        }

登录框显示：

  1. 写控制脚本

这里就是使用正则表达式来校验输入内容的地方,要求是用户名为字母数字组成, 密码为6位数字

3.1 先通过id获取到这两个输入框对象, 并给它们绑定失去焦点或的动作脚本函数

            document.getElementById("yhm").onblur = function(){

            }

            document.getElementById("pwd").onblur = function(){

            }

3.2 然后获取到输入框标签,输入错误提示标签以及输入正确提示标签

            document.getElementById("yhm").onblur = function(){
                var yhmVal = document.getElementById("yhm").value;
                var yhmC = document.getElementById("yhmC");
                var yhmR = document.getElementById("yhmR");
            }

            document.getElementById("pwd").onblur = function(){
                var pwdVal = document.getElementById("pwd").value;
                var pwdC = document.getElementById("pwdC");
                var pwdR = document.getElementById("pwdR");
            }

3.3 再用正则表达式对用户名和密码进行校验, 并用一个临时变量接住它们来进行下一步操作, 如果想对输入内容是否是汉字或者是否是邮箱进行校验, 也可以用下面两个注释了的正则表达式

            document.getElementById("yhm").onblur = function(){
                var yhmVal = document.getElementById("yhm").value;
                var yhmC = document.getElementById("yhmC");
                var yhmR = document.getElementById("yhmR");
                console.log(yhmVal);
                var ret = /^w+$/.test(yhmVal);//校验字母和数字
                //var ret = /[u2E80-u9FFF]+$/.test(yhmVal);//校验汉字
                //var ret = /^w+@w+.w+$/.test(yhmVal);//校验邮箱
            }

            document.getElementById("pwd").onblur = function(){
                var pwdVal = document.getElementById("pwd").value;
                var pwdC = document.getElementById("pwdC");
                var pwdR = document.getElementById("pwdR");
                var ret = /^d{6}$/.test(pwdVal);

            }

3.4 然后再处理一下即可

            document.getElementById("yhm").onblur = function(){
                var yhmVal = document.getElementById("yhm").value;
                var yhmC = document.getElementById("yhmC");
                var yhmR = document.getElementById("yhmR");
                var ret = /^w+$/.test(yhmVal);//校验字母和数字
                //var ret = /[u2E80-u9FFF]+$/.test(yhmVal);//校验汉字
                //var ret = /^w+@w+.w+$/.test(yhmVal);//校验邮箱
                if(false == ret){
                    yhmR.src = "";
                    yhmC.innerHTML="用户名为字母和数字组成!";
                    return false;
                }else{
                    yhmR.src = "../../img/ok_48px.png";
                    yhmC.innerHTML="";
                    return true;
                }
            }

            document.getElementById("pwd").onblur = function(){
                var pwdVal = document.getElementById("pwd").value;
                var pwdC = document.getElementById("pwdC");
                var pwdR = document.getElementById("pwdR");
                var ret = /^d{6}$/.test(pwdVal);
                if(false == ret){
                    pwdR.src = "";
                    pwdC.innerHTML="密码需为6位数字!";
                    return false;
                }else{
                    pwdR.src = "../../img/ok_48px.png";
                    pwdC.innerHTML="";
                    return true;
                }
            }

显示结果：

  1. 其他正则表达式校验

4.1 邮政编码:

4.2 手机号码:

4.3 年龄:

4.4 邮箱:

4.5 用户名:

4.6 生日

4.7 IP地址

4.8 网址

  1. 源代码:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>登录框用户名,密码验证3</title>
    </head>
    <style type="text/css">
        body {
            background-color: darkgray;
        }

        #container{
            width: 200px;
            height: 190px;
            padding: 15px;
            text-align: center;
            margin: 0 auto;
            background-color: white;
        }

        #title{
            color: red;
            position: relative;
        }

        #body > input{
            margin-top: 20px;
            width: 150px;
            height: 20px;
            border: 1px solid gray;
            outline: none;/*去掉input点击后边框颜色*/
            padding-left:20px;
        }       

        #body > div{
            height: 10px;
            color: red;
            font-size: 10px;
        }   

        img{
            height: 10px;
            color: red;
            font-size: 10px;
        }
        button{
            width: 100px;
            height: 25px;
            background-color: red;
            margin-top: 20px;
        }
    </style>
    <body>
        <div id="container">
            <div id="title">账户登录</div>
            <div id="body">
                <input id="yhm" placeholder="请输入用户名" />
                <img id="yhmR" src="" alt="" />
                <div id="yhmC"></div>
                <input id="pwd" type="password" placeholder="请输入您的密码" />
                <img id="pwdR" src="" alt="" />
                <div id="pwdC"></div>
            </div>
            <button>登录</button>
        </div>
        <script type="text/javascript">
            document.getElementById("yhm").onblur = function(){
                var yhmVal = document.getElementById("yhm").value;
                var yhmC = document.getElementById("yhmC");
                var yhmR = document.getElementById("yhmR");
                console.log(yhmVal);
                var ret = /^w+$/.test(yhmVal);//校验字母和数字
                //var ret = /[u2E80-u9FFF]+$/.test(yhmVal);//校验汉字
                //var ret = /^w+@w+.w+$/.test(yhmVal);//校验邮箱
                console.log(ret)
                if(false == ret){
                    yhmR.src = "";
                    yhmC.innerHTML="用户名为字母和数字组成!";
                    return false;
                }else{
                    yhmR.src = "../../img/ok_48px.png";
                    yhmC.innerHTML="";
                    return true;
                }
            }

            document.getElementById("pwd").onblur = function(){
                var pwdVal = document.getElementById("pwd").value;
                var pwdC = document.getElementById("pwdC");
                var pwdR = document.getElementById("pwdR");
                console.log(pwdVal);
                var ret = /^d{6}$/.test(pwdVal);
                if(false == ret){
                    pwdR.src = "";
                    pwdC.innerHTML="密码需为6位数字!";
                    return false;
                }else{
                    pwdR.src = "../../img/ok_48px.png";
                    pwdC.innerHTML="";
                    return true;
                }
            }           
        </script>
    </body>
</html>

发表评论

电子邮件地址不会被公开。 必填项已用*标注