正则表达式的应用——简单的表单验证

最新推荐文章于 2021-10-11 15:19:52 发布
最新推荐文章于 2021-10-11 15:19:52 发布
阅读量459 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chcfner/article/details/79436462
版权

利用正则表达式和简单的方法封装，简单制作的表单验证。效果图如下：


简单的html和css部分代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background-color: #ccc;
        }

        .box {
            width: 415px;
            background-color: #eee;
            border: 1px solid #999;
            margin: 100px auto;
            padding: 50px;
            line-height: 40px;
        }

        label {
            width: 40px;
            display: inline-block;
        }

        span {
            margin-left: 30px;
            font-size: 12px;
            padding:2px 20px 0;
            color: #ccc;
        }
    
        .wrong {
    
            color: red;
            background: url(images/error.png) no-repeat;
            
        }
    
        .right {
            color: green;
            background: url(images/right.png) no-repeat;
        }
    
        .pwd {
            width: 220px;
            height: 20px;
            background: url("images/strong.jpg") no-repeat;
        }

        .str1 {
            background-position: 0 -20px;
        }

        .str2 {
            background-position: 0 -40px;
        }
        .str3 {
            background-position: 0 -60px;
        }
        .str4 {
            background-position: 0 -80px;
        }
    </style>
</head>
<body>
    <div class="box" id="box">
        <label for="inp1">QQ</label><input type="text" id="inp1"><span>输入正确的QQ号码</span><br>
        <label for="inp2">手机</label><input type="text" id="inp2"><span>输入11为手机号码</span><br>
        <label for="inp3">邮箱</label><input type="text" id="inp3"><span>输入正确邮箱</span><br>
        <label for="inp4">座机</label><input type="text" id="inp4"><span>输入您的座机</span><br>
        <label for="inp5">账号</label><input type="text" id="inp5"><span>请输入您的账号</span><br>
        <label for="inp6">密码</label><input type="password" id="inp6"><span>请输入您的密码</span><br>
        <div id="password" class="pwd"></div>
    </div>
</body>
</html>

接下来就是js部分，思路：当输入完毕，input失去焦点后，判读输入值是否符合给定的正则表达式，根据判断结果，给span更新相应的内容和样式；其中密码输入框还需要判断密码强度，根据判断结果，给id值为password的元素更新样式。

没有逐个的获取input元素，而是封装了$()方法，并在change()函数中调用，change函数给input绑定onblur事件；由于每个input失去焦点后，span都会更新，所以封装了setText(obj,txt)和setClassName(obj,classname)。后面调用change()函数，分别传入id值：inp1、inp2、inp3、inp4、inp5、inp6，根据正则表达式判断，更新内容和样式。

//封装的一个$()方法，用于后面方便获取input元素；
    function $(id) {
        return document.getElementById(id);
    }
    console.log($("inp1"));

    //自定义change函数，传入id和fn,调用$()并绑定onblur事件；
    function change(id,fn) {
        $(id).onblur = fn;
    }

    //自定义一个setText函数，根据传入的obj参数,获取span并将innerHTML设置为参数txt;
    function setText(obj,txt) {
        obj.nextSibling.innerHTML = txt;
    }

    //自定义一个setClassName函数，根据传入的obj参数,获取span并添加样式；
    function setClassName(obj,classname) {
        obj.nextSibling.className = classname;
    }

    //调用change函数，传入id和自定义函数；
    change("inp1",function () {
        //如果inp1里的值符合给定的正则表达式，则调用setText()和setClassName(),更新span的内容和样式；
        if(/^[1-9][0-9]{4,}$/.test(this.value)) {
            setText(this,"恭喜输入正确！");
            setClassName(this,"right");
        }else{//如果不符合，同样调用setText()和setClassName(),更新span的内容和样式；
            setText(this,"对不起，输入错误！");
            setClassName(this,"wrong");
        }
    })
    //同理：
    change("inp2",function () {
        if(/^((13[0-9])|(15[^4,\D])|(17[0-9])|(18[0-9]))\d{8}$/.test(this.value)) {
            setText(this,"手机号码正确！");
            setClassName(this,"right");
        }else{
            setText(this,"对不起，是11位！");
            setClassName(this,"wrong");
        }
    })

    change("inp3",function () {
        if(/^[\w\-\.]+\@[\w]+\.[\w]{2,4}$/.test(this.value)) {
            setText(this,"邮箱输入正确！");
            setClassName(this,"right");
        }else{
            setText(this,"对不起，输入错误！");
            setClassName(this,"wrong");
        }
    })

    change("inp4",function () {
        if(/^0\d{2}-\d{8}$|^0\d{3}-\d{7}$/.test(this.value)) {
            setText(this,"座机号码正确！");
            setClassName(this,"right");
        }else{
            setText(this,"对不起，输入错误！");
            setClassName(this,"wrong");
        }
    })

    change("inp5",function () {
        if(/^[a-zA-Z0-9_-]{3,16}$/.test(this.value)) {
            setText(this,"用户名正确！");
            setClassName(this,"right");
        }else{
            setText(this,"对不起，输入错误！");
            setClassName(this,"wrong");
        }
    })

    change("inp6",function () {
        if(/^[a-zA-Z0-9_-]{6,18}/.test(this.value)) {
            setText(this,"密码正确！");
            setClassName(this,"right");
            //只要输入的密码符合给定的密码检测规则，就给passsord添加类名str1;
            $("password").className = "pwd str1";
            if(/^[A-Za-z0-9]+[_][A-Za-z0-9]*$/.test(this.value)) {
                //既有小写也有大写，还有数字和下划线；
                $("password").className = "pwd str4";
            }else if(/^([a-z].*[0-9])|([A-Z].*[0-9])|[0-9].*[a-zA-Z]$/.test(this.value)) {
                //既有小写和大写，还有数字；
                $("password").className = "pwd str3";
            }else if(/^([a-z].*[A-Z])|([A-Z].*[a-z])$/.test(this.value)) {
                //有小写和大写；
                $("password").className = "pwd str2";
            }
        }else{
            setText(this,"对不起，输入错误！");
            setClassName(this,"wrong");
        }
    })

chcfner
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
什么是正则表达式?——学习笔记
Myself's CSDN
05-03 596
正则表达式到底是什么东西？ 1.在编写处理字符串的程序或网页时，经常会有查找符合某些复杂规则的字符串的需要。正则表达式就是用于描述这些规则的工具。换句话说，正则表达式就是记录文本规则的代码。 符号 解释 示例 说明 . 匹配任意字符 b.t 可以匹配bat / but / b#t / b1t等 \w 匹配字母/数字/下划线 b\wt 可以匹配bat / b1t / b_t等但不...
正则表达式应用替换/删除/校验/测试技巧
哈里·雪利博客
01-11 6215
正则表达式应用替换技巧 实例目录 【1】 正则表达式应用——替换指定内容到行尾 【2】 正则表达式应用——数字替换 【3】 正则表达式应用——删除每一行行尾的指定字符 【4】 正则表达式应用——替换带有半角括号的多行 【5】 正则表达式应用——删除空行 【6】 正则表达式应用——实例应用 应用实例 【1】正则表达式应用——替换指定内容到行尾 原始文本如下面两行
用正则表达式验证表单
01-21
表单验证，验证用户输入的数据是否合法 一般的表单验证都是在客户端进行的，用户名重复验证是在服务端进行的一般使用AJax技术 1、用户失去焦点的时候要给出提示 本质，就是用户输入的内容与特定的规则进行匹配 a、把特定的规则写在自己的input对象中，自定义属性 b、把每一个需要验证的input对象，进行事件的绑定 c、规则与用户输入内容进行匹配，正则表达式 正则表达式规则.test(要验证的内容); d、给出明确的提示信息span标签中以及边框的颜色 2、用户点击提交按钮的时候要给出提示
正则表达式判断简单的表单验证
OrdnAry的博客
08-24 211
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #div1{width: 250px
JS之正则表达式及简单表单验证
蓝莓味的鱼
09-08 3485
一:正则表达式语法规则 1:[abc]                a,b或者c任何一个 2:[a-zA-Z]           a到z或A到Z任何一个 3:\d                     表示数字[0-9]，即0到9任意一个 4:X{n}                 表示有n个X 5:X{n,}                表示有n个以上X 6:X{n,m} ...
2019/9/19正则表达式的应用（主要用于表单）
weixin_43811818的博客
09-19 107
用户名：(数字，字母，下划线组成的6-15位字符且不能以数字开头)
js案例：表单验证（正则表达式）
wang_swa99er的博客
10-11 230
js案例：表单验证（正则表达式） 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
HTML入门(六)——正则表达式
Mr_MT1998的博客
06-08 3598
正则表达式 一、概念   正则表达式（Regular Expression）是用于描述一组字符串特征的模式，用来匹配特定的字符串。通过特殊字符+普通字符来进行模式描述，从而达到文本匹配目的工具。 二、应用场景 （1）验证：表单提交时，进行用户名密码的验证。 （2）查找：从大量信息中快速提取指定内容，在一批url中，查找指定url。 （3）替换：将指定格式的文本进行正则匹配查找，找到之后进行特定替换。 三、参考语法 正则语法 表示含义 . 除换行符以外的所有字符。 ^ 字符串开头。 $
JavaScript正则表达式——正则定义、正则方法
DebbyOctober的博客
09-01 425
一、正则表达式是什么 正则表达式又称规则表达式 二、正则表达式的应用场景 1.表单验证 2.解析url参数 3.筛选… .（等功能 ） 三、正则表达式的定义 两种定义方式： 方式一：字面量形式 ====》“ // ” 注： 字面量形式类似于：注释的表示方法（//） #当没有数据时，显示为未定义undefined 方式二：构造函数形式 ====》new RegExp() 两种形式的区别： 字面量形式内不能放入变量|函数(数组等等……) 构造函数形式内可以放入变量|函数 首先这样编写是没问题的
jQuery正则验证注册页面经典实例
10-19
jQuery正则验证是一种通过正则表达式来检查用户输入内容的合法性，并对不符合规则的数据进行提示的方法。 在本文中，我们将详细介绍如何使用jQuery和正则表达式来验证注册页面的几个关键字段，包括用户名、密码、...
如何用正则表达式完成表单验证
winneryy的博客
01-15 366
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表单验证实例</title> <style> ul,li{ list-style: none; } li{ margin-top: 10px; } .success{ color:green; } .error{ co.
【正则表达式实战运用】表单验证功能原来是这样实现的
nilvya的博客
02-15 461
继续练习正则表达式的实战运用，本次项目利用正则表达式设计一个简单的表单验证程序。
验证（Javascript和正则表达式）
jumtre的专栏
10-31 6001
昨天写了验证（C#和正则表达式），今天又写了个js版的验证。现在贴出来，为了方便自己查阅，同时也希望能给需要的人帮助和一些启发。由于今天才开始接触js，所以可能会有一些错漏，希望大家能批评指正。 var Validator = { VerityLib: { //验证字符串非空 IsNotEmpty: function (input) {
有哪些常见的验证表单方式，他们各自的优缺点是什么？
IT修真院：初学者转行到互联网的聚集地
12-05 540
这里是修真院前端小课堂，每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能。 大家好，我是IT修真院武汉分院web吴三水，一枚正直纯洁善良的web程序员。 今天给大家分享一下，修真院官网js（职业）任务十，深度思考中的知识点： 【有哪些常见的验证表单方式，他们各自的优缺点是什么？】 1.背...
正则表达式验证表单
banliyou9765的博客
08-29 251
正则是用来描述字符规则的，常常用来做表单验证。先说下正则的创建和简单的使用吧！ / / 是正则表达式的标识符 创建 字面量创建　　 var reg=/a/; 构造函数创建　　var reg=new RegExp("a"); 使用：不能直接使用，需配合方法使用 字符： 　　　　str.match(reg) 　　　　str.replace(reg) ...
正则表达式表单验证
weixin_45743799的博客
11-24 1281
使用正则表达式验证表单中输入的内容是否符合格式。 原理分析： 1.失去焦点和获取焦点 2.获取内容 3.判断是否符合 4.不符合显示错误号符合显示对号 效果演示 代码演示 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></...
表单验证 正则表达式
Bigbigwen的博客
10-08 716
表单验证 引用var validator = new FormValidator(‘#orderForm’,{ 验证的input框name inputs:[“transactionPassword”], //对应的验证规则 rules: { transactionPassword: “required|maxlength:6|digit”
简单的表单验证正则表达式
xiaoya13144111的专栏
10-25 598
body里所有内容   function checkAll(){   var name=document.getElementById("name");   var password=document.getElementById("password");   var age=document.getElementById("age");   var phone=document.g
简简单单的正则表单验证练习
weixin_34314962的博客
08-28 146
正则表单联系 第一步，布局 再练习之前，我上网查了一些网站的登陆注册页面，一般都是可以兼容手机端和pc端，所以我使用了bootstarp进行布局，正好也再次练习一下bootstarp的使用。bootstarp中文网地址分享给大家http://www.bootcss.com/ 话不多说，直接上图： 第二步，书写表单验证js 首先，我们需要练...
正则表达式零宽断言详解——(?=exp)
正则表达式，简称regex，是一种强大的文本处理工具，它允许用户通过一系列特殊字符构造出匹配模式，用于在数据文件、程序输入或网页表单中寻找、验证或替换特定的文本模式。在正则表达式中，有一些特殊的元字符，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值