JavaScript正则表达式实现注册信息校验功能


Posted in Java/Android onMay 30, 2022

Java和JavaScript正则表达式的对比 Java中也有正则表达式,默认情况下必须要精确匹配 ;而在JS中默认是模糊匹配,只要字符串包含了正则表达式的内容就返回true

正则表达式 匹配字符串 Java中匹配结果 JavaScript中匹配结果
\d{3} a123b false true
^\d{3} 123b false true
\d{3}$ a123 false true
^\d{3}$ 123 true true

注册信息校验

需求

  1. 在JS中使用正则表达式进行验证。
  2. 用户名:只能由英文字母和数字组成,长度为4~16个字符,并且以英文字母开头
  3. 密码: 大小写字母和数字6-20个字符
  4. 确认密码:两次密码要相同
  5. 电子邮箱: 符合邮箱地址的格式 /^\w+@\w+(.[a-zA-Z]{2,3}){1,2}$/
  6. 手机号:/^1[34578]\d{9}$/
  7. 生日:生日的年份在1900~2009之间,生日格式为1980-5-12或1988-05-04的形式,/^((19\d{2})|(200\d))-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])$/

案例分析

  • 创建正则表达式
  • 得到文本框中输入的值
  • 如果不匹配,在后面的span中显示错误信息,返回false
  • 如果匹配,在后面的span中显示一个打勾图片,返回true
  • 写一个验证表单中所有的项的方法,所有的方法都返回true,这个方法才返回true.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>验证注册页面</title>
    <style type= "text/css">
        body {
            margin: 0;
            padding: 0;
            font‐size: 12px;
            line‐height: 20px;
        }
        .main {
            width: 525px;
            margin‐left: auto;
            margin‐right: auto;
        }
        .hr_1 {
            font‐size: 14px;
            font‐weight: bold;
            color: #3275c3;
            height: 35px;
            border‐bottom‐width: 2px;
            border‐bottom‐style: solid;
            border‐bottom‐color: #3275c3;
            vertical‐align: bottom;
            padding‐left: 12px;
        }
        .left {
            text‐align: right;
            width: 80px;
            height: 25px;
            padding‐right: 5px;
        }
        .center {
            width: 280px;
        }
        .in {
            width: 130px;
            height: 16px;
            border: solid 1px #79abea;
        }
        .red {
            color: #cc0000;
            font‐weight: bold;
        }
        div {
            color: #F00;
        }
        </style>
    <script type="text/javascript">
        //验证表单中所有的项
        function checkAll () {
//所有的方法都返回true,这个方法才返回true
            return checkUser() && checkMail();
        }
        //验证用户名
        function checkUser () {
//1. 创建正则表达式
            var reg = /^[a‐zA‐Z][a‐zA‐Z0‐9]{3,15}$/;
//2. 得到文本框中输入的值
            var value = document.getElementById("user").value;
//3. 如果不匹配,在后面的span中显示错误信息,返回false
            if (reg.test(value)==false) {
                document.getElementById("userInfo").innerHTML = "用户名不正确";
                return false;
            }
//4. 如果匹配,在后面的span中显示一个打勾图片,返回true
            else {
                document.getElementById("userInfo").innerHTML = "<img src='img/gou.png' width='15'/>";
                return true;
            }
        }
        //验证邮箱
        function checkMail () {
            //1. 创建正则表达式
            var reg = /^\w+@\w+(\.[a‐zA‐Z]{2,3}){1,2}$/;
//2. 得到文本框中输入的值
            var value = document.getElementById("email").value;
//3. 如果不匹配,在后面的span中显示错误信息,返回false
            if (reg.test(value)==false) {
                document.getElementById("emailInfo").innerHTML = "邮箱格式不正确";
                return false;
            }
//4. 如果匹配,在后面的span中显示一个打勾图片,返回true
            else {
                document.getElementById("emailInfo").innerHTML = "<img src='img/gou.png' width='15'/>";
                return true;
            }
        }
    </script>
</head>
<body>
<form action="server" method="post" id="myform" onsubmit="return checkAll()">
    <table class="main" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td><img src="img/logo.jpg" alt="logo" /><img src="img/banner.jpg" alt="banner" /></td>
        </tr>
        <tr>
            <td class="hr_1">新用户注册</td>
        </tr>
        <tr>
            <td style="height:10px;"></td>
        </tr>
        <tr>
            <td>
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <!‐‐ 长度为4~16个字符,并且以英文字母开头 ‐‐>
                        <td class="left">用户名:</td>
                        <td class="center">
                            <input id="user" name="user" type="text" class="in" onblur="checkUser()"/>
                            <span style="color: red" id="userInfo"></span>
                        </td>
                    </tr>
                    <tr>
                        <!‐‐ 不能为空, 输入长度大于6个字符 ‐‐>
                        <td class="left">密码:</td>
                        <td class="center">
                            <input id="pwd" name="pwd" type="password" class="in" />
                        </td>
                    </tr>
                    <tr>
                        <!‐‐ 不能为空, 与密码相同 ‐‐>
                        <td class="left">确认密码:</td>
                        <td class="center">
                            <input id="repwd" name="repwd" type="password" class="in"/>
                        </td>
                    </tr>
                    <tr>
                        <!‐‐ 不能为空, 邮箱格式要正确 ‐‐>
                        <td class="left">电子邮箱:</td>
                        <td class="center">
                            <input id="email" name="email" type="text" class="in" onblur="checkMail()"/>
                            <span id="emailInfo" style="color: red;"></span>
                        </td>
                    </tr>
                    <tr>
                        <!‐‐ 不能为空, 使用正则表达式自定义校验规则,1开头,11位全是数字 ‐‐>
                        <td class="left">手机号码:</td>
                        <td class="center">
                            <input id="mobile" name="mobile" type="text" class="in"/>
                        </td>
                    </tr>
                    <tr>
                        <!‐‐ 不能为空, 要正确的日期格式 ‐‐>
                        <td class="left">生日:</td>
                        <td class="center">
                            <input id="birth" name="birth" type="text" class="in"/>
                        </td>
                    </tr>
                    <tr>
                        <td class="left">&nbsp;</td>
                        <td class="center">
                            <input name="" type="image" src="img/register.jpg" />
                        </td>
                    </tr>
                </table></td>
        </tr>
    </table>
</form>
</body>
</html>

JavaScript正则表达式实现注册信息校验功能

到此这篇关于JavaScript正则表达式实现注册信息校验的文章就介绍到这了!


Tags in this post...

Java/Android 相关文章推荐
分析Netty直接内存原理及应用
Jun 14 Java/Android
Java数据结构之链表相关知识总结
Jun 18 Java/Android
浅谈Python魔法方法
Jun 28 Java/Android
java实现对Hadoop的操作
Jul 01 Java/Android
用Java实现简单计算器功能
Jul 21 Java/Android
使用HttpSessionListener监听器实战
Mar 17 Java/Android
Java虚拟机内存结构及编码实战分享
Apr 07 Java/Android
Java8利用Stream对列表进行去除重复的方法详解
Apr 14 Java/Android
Java工作中实用的代码优化技巧分享
Apr 21 Java/Android
JAVA 线程池(池化技术)的实现原理
Apr 28 Java/Android
Springboot-cli 开发脚手架,权限认证,附demo演示
Apr 28 Java/Android
Java线程的6种状态与生命周期
May 11 Java/Android
Java时间工具类Date的常用处理方法
May 25 #Java/Android
Java实现扫雷游戏详细代码讲解
多线程Spring通过@Scheduled实现定时任务
May 25 #Java/Android
SpringBoot全局异常处理方案分享
May 25 #Java/Android
Java数据结构之堆(优先队列)
May 20 #Java/Android
Java中Dijkstra(迪杰斯特拉)算法
Android Studio实现带三角函数对数运算功能的高级计算器
May 20 #Java/Android
You might like
网页游戏开发入门教程二(游戏模式+系统)
2009/11/02 PHP
php简单日历函数
2015/10/28 PHP
PHP中迭代器的简单实现及Yii框架中的迭代器实现方法示例
2020/04/26 PHP
PHP安装扩展mcrypt以及相关依赖项深入讲解
2021/03/04 PHP
始终在屏幕中间显示Div的代码(css+js)
2011/03/10 Javascript
Js 去掉字符串中的空格(实现代码)
2013/11/19 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
express的中间件cookieParser详解
2014/12/04 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
2015/03/12 Javascript
js中for in语句的用法讲解
2015/04/24 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
2015/06/05 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
2016/07/04 Javascript
vue.js学习之vue-cli定制脚手架详解
2017/07/02 Javascript
nodejs 搭建简易服务器的图文教程(推荐)
2017/07/18 NodeJs
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
2018/07/24 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
2018/08/13 Javascript
react中使用css的7中方式(最全总结)
2019/02/11 Javascript
js判断一个对象是数组(函数)的方法实例
2019/12/19 Javascript
微信小程序pinker组件使用实现自动相减日期
2020/05/07 Javascript
跟老齐学Python之数据类型总结
2014/09/24 Python
Django项目中用JS实现加载子页面并传值的方法
2018/05/28 Python
详解Python3.6安装psutil模块和功能简介
2018/05/30 Python
python实现杨氏矩阵查找
2019/03/02 Python
Python 实现还原已撤回的微信消息
2019/06/18 Python
使用python创建Excel工作簿及工作表过程图解
2020/05/27 Python
利用纯CSS3实现动态的自行车特效源码
2017/01/20 HTML / CSS
英国领先的运动物理治疗供应公司:Vivomed
2018/07/14 全球购物
TripAdvisor台湾:全球最大旅游网站
2018/08/26 全球购物
工程地质勘察专业大学生求职信
2013/10/13 职场文书
学校安全检查制度
2014/01/27 职场文书
献爱心倡议书
2014/04/14 职场文书
2014小学语文教师个人工作总结
2014/12/03 职场文书
学期个人工作总结
2015/02/13 职场文书
护士自我推荐信范文
2015/03/24 职场文书
解决numpy数组互换两行及赋值的问题
2021/04/17 Python