练习 正则表达式进行 表单验证

最新推荐文章于 2024-01-15 09:10:50 发布
最新推荐文章于 2024-01-15 09:10:50 发布
阅读量369 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： 正则表达式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/shitou0/article/details/78986790
本文介绍了一个使用JavaScript和jQuery实现的表单验证示例，包括账号、密码、昵称等字段的有效性检查，并通过正则表达式确保输入格式正确。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<head>
        <meta charset="utf-8" />
        <title>第二周周五晚上——表单验证</title>
        <script type="text/javascript" src="libs/jquery-1.11.0.js"></script>
        <!--所有span标签设置红色-->
        <style type="text/css">
            span {
                color: red;
            }
        </style>
        <script>
            var flagzhanghao = false;
            var flagmima = false;
            var flagchongfumima = false;
            var flagnicheng = false;
            var flagchushengriqi = false;
            var flagshengfenzheng = false;
            var flagshoujihao = false;
            var flagqq = false;
            var flagyouxiang = false;
            $(function() {
                //账号    /^[a-zA-Z0-9_]{3,16}$/
                //账号  /[`~!@#$%^&*_+<>{}\/'[\]]/im
                var zzhanghao = /[^\uFF00-\uFFFF\+\-\*\/]/i;
                $("#zhanghao").blur(function() {
                    if($(this).val() == "") {
                        $("#zhanghaoSpan").html("不能为空");
                        flagzhanghao = false;
                    } else {
                        $(this).val();
                        if(!zzhanghao.test($(this).val())) {
                            $("#zhanghaoSpan").html("账号格式不正确");
                            flagzhanghao = false;
                        } else {
                            $("#zhanghaoSpan").html("√");
                            flagzhanghao = true;
                        }
                    }
                });
                //密码    /^(?=.*?[A-Za-z]+)(?=.*?[0-9]+)(?=.*?[A-Z]).*$/
                var zmima = /^(?=.*?[A-Za-z]+)(?=.*?[0-9]+)(?=.*?[A-Z]).*$/;
                $("#mima").blur(function() {
                    if($(this).val() == "") {
                        $("#mimaSpan").html("不能为空");
                        flagmima = false;
                    } else {
                        $(this).val();
                        if(!zmima.test($(this).val())) {
                            $("#mimaSpan").html("账号格式不正确");
                            flagmima = false;
                        } else {
                            $("#mimaSpan").html("√");
                            flagmima = true;
                        }
                    }    
                });

                //重复密码
                $("#chongfumima").blur(function() {
                    if($(this).val() == "") {
                        $("#chongfumimaSpan").html("不能为空");
                        flagchongfumima = false;
                    } else if($(this).val() != $("#mima").val()) {
                        $("#chongfumimaSpan").html("两次密码输入的不一样");
                    } else {
                        if($(this).val().length < 3) {
                            $("#chongfumimaSpan").html("不能小于3");
                            flagchongfumima = false;
                        } else {
                            $("#chongfumimaSpan").html("√");
                            flagchongfumima = true;
                        }
                    }
                });
                //昵称
                $("#nicheng").blur(function() {
                    if($(this).val() == "") {
                        $("#nichengSpan").html("不能为空");
                        flagnicheng = false;
                    } else if($(this).val() == "我是昵称1" || $(this).val() == "我是昵称2") {
                        $("#nichengSpan").html("重复");
                    } else {
                        if($(this).val().length < 3) {
                            $("#nichengSpan").html("昵称不能小于3");
                            flagnicheng = false;
                        } else {
                            $("#nichengSpan").html("√");
                            flagnicheng = true;
                        }
                    }
                });

                //                //出生日期  /^((19\d{2})|(200[0-8]))-[1-12]-[1-31]$/
                //                var zzchusheng= /^((19\d{2})|(201[0-8]))-[1-12]-[1-31]$/;
                $("#chusheng").blur(function() {
                    if($(this).val() == "") {
                        $("#chushengSpan").html("不能为空");
                        flagchushengriqi = false;
                    } else {
                        $("#chushengSpan").html("√");
                        flagchushengriqi = true;
                    }
                });

                //身份证号码
                var zshenfen = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
                $("#shenfenzheng").blur(function() {
                    if($(this).val() == "") {
                        $("#shenfenzhengSpan").html("不能为空");
                        flagshengfenzheng = false;
                    } else {
                        $(this).val();
                        if(!zshenfen.test($(this).val())) {
                            $("#shenfenzhengSpan").html("身份证格式不正确");
                            flagshengfenzheng = false;
                        } else {
                            $("#shenfenzhengSpan").html("√");
                            flagshengfenzheng = true;
                        }
                    }
                });
                //手机号
                var sj = /13[123569]{1}\d{8}|15[1235689]\d{8}|188\d{8}/;
                $("#shoujihao").blur(function() {
                    if($(this).val() == "") {
                        $("#shoujihaoSpan").html("不能为空");
                        flagshoujihao = false;
                    } else {
                        $(this).val();
                        if(!sj.test($(this).val())) {
                            $("#shoujihaoSpan").html("手机格式不正确");
                            flagshoujihao = false;
                        } else {
                            $("#shoujihaoSpan").html("√");
                            flagshoujihao = true;
                        }
                    }
                });
                // QQ
                var zqq = /^\d{5,10}$/;
                $("#qq").blur(function() {
                    if($(this).val() == "") {
                        $("#qqSpan").html("不能为空");
                        flagqq = false;
                    } else {
                        $(this).val();
                        if(!zqq.test($(this).val())) {
                            $("#qqSpan").html("QQ格式不正确");
                            flagqq = false;
                        } else {
                            $("#qqSpan").html("√");
                            flagqq = true;
                        }
                    }
                });
                //邮箱    
                //正则表达式      /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/
                var youxiang = /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/;
                $("#youxiang").blur(function() {
                    if($(this).val() == "") {
                        $("#youxiangSpan").html("不能为空");
                        flagyouxiang = false;
                    } else {
                        $(this).val();
                        if(!youxiang.test($(this).val())) {
                            $("#youxiangSpan").html("邮箱格式不正确");
                            flagyouxiang = false;
                        } else {
                            $("#youxiangSpan").html("√");
                            flagyouxiang = true;
                        }
                    }
                });

                //点击确认按钮进行跳转
                $("#sub").click(function() {
                    if(flagzhanghao && flagmima && flagchongfumima && flagnicheng && flagchushengriqi && flagshengfenzheng && flagshoujihao && flagqq && flagyouxiang) {
                        window.location = "two.html";
                    } else {
                        alert("请正确填写！")
                    }
                })
            });
        </script>
    </head>

    <body>
        <!--第二种提交方式  但是可以实现清空按钮-->
        <form action="two.html">
            <!--<form>-->
            <table width="478" cellspacing="0" cellpadding="1" align="center">

                <tr>
                    <td width="131">账　号　：</td>
                    <td width="334">
                        <input type="text" id="zhanghao" />
                        <span id="zhanghaoSpan"></span>
                    </td>
                </tr>
                <tr>
                    <td>密　码　：</td>
                    <td>
                        <input type="password" id="mima" />
                        <span id="mimaSpan">*</span>
                    </td>
                </tr>
                <tr>
                    <td>重复密码：</td>
                    <td>
                        <input type="password" id="chongfumima" />
                        <span id="chongfumimaSpan">*</span>
                    </td>
                </tr>
                <tr>
                    <td>昵　称　：</td>
                    <td>
                        <input type="text" id="nicheng" />
                        <span id="nichengSpan"></span>
                    </td>
                </tr>
                <tr>
                    <td>出生日期：</td>
                    <td>
                        <!--<input type="text" id="chusheng" />-->
                        <input type="date" id="chusheng" />
                        <span id="chushengSpan">*</span>
                    </td>
                </tr>
                <tr>
                    <td>性　别　：</td>
                    <td>
                        <input type="radio" name="sex" checked="checked" />女
                        <input type="radio" name="sex" />男
                    </td>
                </tr>
                <tr>
                    <td>身份证号：</td>
                    <td>
                        <input type="text" id="shenfenzheng" />
                        <span id="shenfenzhengSpan">*</span>
                    </td>
                </tr>
                <tr>
                    <td>手机号　：</td>
                    <td>
                        <input type="text" id="shoujihao" />
                        <span id="shoujihaoSpan">*</span>
                    </td>
                </tr>
                <tr>
                    <td>Q　Q　 ：</td>
                    <td>
                        <input type="text" id="qq" />
                        <span id="qqSpan"></span>
                    </td>
                </tr>
                <tr>
                    <td>邮　箱　：</td>
                    <td>
                        <input type="text" id="youxiang" />
                        <span id="youxiangSpan">*</span>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" align="center">
                        <!--<button id="sub">提交</button>-->
                        <input type="submit" id="sub" value="提交" />
                        <input type="reset" value="清空" />
                    </td>
                </tr>

            </table>
        </form>
    </body>

I_do_
关注
jQuery基础之正则表达式及表单验证
Always_Love的博客
02-23 1959
这篇博客就来总结一下jQuery里面的正则表达式以及表单验证。 一、正则表达式 正则表达式的作用是用来验证字符串的格式。虽然它的内容比较繁琐，但是功能很强大。它的写法很随意，但是要注意语法规则，在此前提下就可以自己随意拼接。 ...
详解正则表达式表单验证实例
10-22
通过这些正则表达式表单验证的示例，用户可以学习到正则表达式在实际应用中的强大功能和灵活性。使用正则表达式进行表单验证，不仅可以节省开发者的大量时间，而且可以有效地提高网站的用户体验，避免因用户输入错误...
用正则表达式验证表单
01-21
表单验证，验证用户输入的数据是否合法 一般的表单验证都是在客户端进行的，用户名重复验证是在服务端进行的一般使用AJax技术 1、用户失去焦点的时候要给出提示 本质，就是用户输入的内容与特定的规则进行匹配 a、把特定的规则写在自己的input对象中，自定义属性 b、把每一个需要验证的input对象，进行事件的绑定 c、规则与用户输入内容进行匹配，正则表达式 正则表达式规则.test(要验证的内容); d、给出明确的提示信息span标签中以及边框的颜色 2、用户点击提交按钮的时候要给出提示
jquery表单验证
qq_40857831的博客
01-06 298
span{ color: red; } var flagzhanghao = false; var flagmima = false; var flagchongfumima = false; var flagnicheng = false; var flagchushengriqi = false; var flagshengfenz
用正则表达式和javascript对表单进行全面验证
尚兴跃的备忘录
09-17 602
 代码：使用时请将下面的javascript代码存到一个单一的js文件中。1、表单要求 "formname" onSubmit="return validateForm(this)"> 将对表单中的所有以下类型的域依次验证，所有验证是去除了前导和后缀空格的，要注意是区分大小写的。2、空值验证 表单中任意域加上emptyInfo属性将对此域是否为空进行验证（可以和
js----使用正则表达式进行简单的表单验证
scwMason的博客
08-10 563
&lt;h1&gt;表单验证&lt;/h1&gt; &lt;form action="" method="post" name="myform" onsubmit="judge()"&gt; &lt;tr&gt; 姓名：&lt;input type="text" name=&quo
使用正则表达式验证一年的12个月份
12-19
正则表达式是一种强大的文本处理工具，用于匹配、查找、替换等操作，广泛应用于编程语言中。在IT行业中，正则表达式...无论是在网页表单验证、服务器端数据处理还是数据分析场景，正则表达式都是一个强大而灵活的工具。
【正则表达式】正则表达式全解析：元字符、限定符、分组等常用示例及应用场景汇总
最新发布
04-22
此外，还列举了许多实用的正则表达式，如验证数字、字母组合、日期、电话号码、电子邮件地址、网址等，以及如何在JavaScript中使用正则表达式进行字符串操作。; 适合人群：具有一定编程经验，尤其是对正则表达式感到...
正则表达式30分钟入门教程
11-09
教程还提到了正则表达式的测试工具，这是一个很重要的概念，因为通过测试工具可以验证正则表达式的正确性，通过实际操作来加深对正则表达式模式的理解。 最后，教程强调了学习正则表达式的要点：理解原理、多练习、...
java使用正则表达式判断邮箱格式是否正确的方法
09-03
主要介绍了java使用正则表达式判断邮箱格式是否正确的方法,涉及java正则表达式及字符串的相关操作技巧,需要的朋友可以参考下
javascript表单验证 正则表达式验证表单
04-16
比较实用的javascript做的表单验证，验证的表单域包括用户名、密码、密码确认、密码提示问题、邮箱、手机号码、身份证。表单域基本通过获得焦点显示提示信息，失去焦点进行验证，还有提交表单验证。提交表单先进行必填项不能为空验证，再进行正则表达式匹配验证。
北大青鸟ACCP5.0JavaScript特效与表单验证-上机作业源代码
06-22
北大青鸟ACCP5.0JavaScript特效与表单验证-书中示例源代码<br>。都是自己手写的代码，我正在学习的内容。这部分是上机作业。大家交流一下吧。
JQuery验证表单完美实例
12-12
JQuery验证表单完美实例，用JQuery+CSS 验证提交表单，简单完整的代码，web开发新手可以试试
表单验证-正则表达式
HL141916的博客
05-19 819
本周的学习任务是制作一个正则表达式。学长给了一个正则表达式教程，看完了以后发现并没有记住什么。正则表达式真的要记的东西很多，所以我都是直接在网上找相应的表达式，因为要调试验证，慢慢也记住了一些最基本的东西。现在拿到一个正则表达式还是能够做一些最基本分析，也能看懂一部分。尽管如此，在制作表单验证的时候还是出现了一些问题。 首先，最开始我是把每个函数都用提交按钮去测试，后来发现最后提交的时候怎么办呢
前端开发必备：掌握正则表达式，轻松应对复杂的表单验证
希望看完文章的你能够带着答案离开。
01-15 2256
前端开发必备：掌握正则表达式，轻松应对复杂的表单验证
javascript 正则表达式--表单事件 注册页面练习
weixin_52088589的博客
04-29 528
注册页面练习 // 书写JS的文件 // 1、引入新的JS文件 window.onload = function () {// 2、添加加载事件，页面加载完成之后 // 注意：失去焦点，给对应的span添加类名 // 并且，给span中添加i（带有类名）标签，还有提示内容 // 3、获取元素 var tel = document.getElementById('tel'); var qq = document.getElementById('qq'); var nc = document.g
表单验证常用正则表达式
crazyzhanyue的博客
03-07 1429
QQ 手机 昵称 密码 邮箱 var g = function(id){return document.getElementById(id);} var changed = function(id, fn){ g(id).onchange = fn; } var setNextHtml = function(id, html){ g(id).nextSibling.
jQuery表单验证
你的孤独，虽败犹荣的博客
12-09 231
第二周模拟考试                  .odd{             background-color:blue;         }         .even{             background-color:red;         }                  $(function(){             //按钮点击事件
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值