JavaScript正则表达式实现注册信息校验
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 |
注册信息校验
需求
- 在JS中使用正则表达式进行验证。
- 用户名:只能由英文字母和数字组成,长度为4~16个字符,并且以英文字母开头
- 密码: 大小写字母和数字6-20个字符
- 确认密码:两次密码要相同
- 电子邮箱: 符合邮箱地址的格式 /^\w+@\w+(.[a-zA-Z]{2,3}){1,2}$/
- 手机号:/^1[34578]\d{9}$/
- 生日:生日的年份在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,这个方法才返回truereturn 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中显示错误信息,返回falseif (reg.test(value)==false) {document.getElementById("userInfo").innerHTML = "用户名不正确";return false;}
//4. 如果匹配,在后面的span中显示一个打勾图片,返回trueelse {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中显示错误信息,返回falseif (reg.test(value)==false) {document.getElementById("emailInfo").innerHTML = "邮箱格式不正确";return false;}
//4. 如果匹配,在后面的span中显示一个打勾图片,返回trueelse {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"> </td><td class="center"><input name="" type="image" src="img/register.jpg" /></td></tr></table></td></tr></table>
</form>
</body>
</html>
JavaScript正则表达式实现注册信息校验相关推荐
- Javascript正则表达式实现输入框验证信息
1.了解正则表达式可以: 测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或一个信用卡号码模式.这称为数据有效性验证 替换文本.可以在文档中使用一个正则表 ...
- javascript 正则表达式详解
正则表达式中的特殊字符 字符 含意 \ 做为转意,即通常在"\"后面的字符不按原来意义解释,如/b/匹配字符"b",当b前面加了反斜杆后/\b/,转意为匹配一个 ...
- 经典JavaScript正则表达式实战
来源:http://www.cainiao8.com/web/js_note/js_regular_expression_blueidea.html 目录 1. 正则表达式实战...1 2. 匹 ...
- php正则判断是否为QQ号,正则表达式对qq号码校验
正则表达式对qq号码校验 废话不多说了,直接给大家贴代码了,具体代码如下所示: package 正则表达式; /*对QQ号码进行校验 要求5~15位,不能以0开头,只能是数字*/ import jav ...
- html增加状态信息管理代码,JavaScript+HTML实现学生信息管理系统
一.前言 用数组来存储所有学生对象的信息,实现了双向更新,初始时(数组内的对象信息"填充界面"),后面的界面操作可以更新数组内对象的信息(数量和本身数据域信息). 优点:JQuer ...
- JavaScript正则表达式笔记
正则表达式是一个描述字符模式的对象. JavaScript的RegExp对象和String对象定义了使用正则表达式来执行强大的模式匹配和文本检索与替换函数的方法. ''**************** ...
- 好程序员web前端分享使用JavaScript正则表达式如何去掉双引号
为什么80%的码农都做不了架构师?>>> 好程序员web前端分享使用JavaScript正则表达式如何去掉双引号,最近接了一个项目,项目需求需要用js正则表达式过滤掉页面文本域 ...
- JavaScript正则表达式快速简单的指南
Interested in learning JavaScript? Get my ebook at jshandbook.com 有兴趣学习JavaScript吗? 在jshandbook.com上 ...
- 正则表达式实现身份证信息验证
一.任务描述 西普工程师想了解正则表达式,为达到更好的对正则更深入的认知,打算利用正则表达式实现身份证信息的验证的实验,结合Python的基础知识实现并填写工作报告. 二.任务目标 1)熟悉Pyt ...
最新文章
- Hive MetaStore 在快手遇到的挑战与优化
- android ijkplayer使用_Ijkplayer、ExoPlayer、VLC播放器综合比较
- 【重磅】Tensorflow2.0实现29种深度强化学习算法大汇总
- 【杂谈】循序渐进,有三AI不得不看的技术综述(超过100篇核心干货)
- 论中国传统辩证推理科学理论范式(ZZ)
- matlab 时序数据,9 个 MATLAB 数据科学速查表 - MATLAB Simulink
- 24 MM配置-采购-配额管理-定义编码范围
- Python框架篇之Django(基本流程、命令行、配置文件)
- 指定输出路径_新版Creo输入输出配置不用愁,果断收藏本文就对了
- java react_Java 9React流
- 【译】AS3利用CPU缓存
- 专题训练——[kuangbin带你飞]最短路练习
- Axure RP8下载以及注册
- Deepin安装和设置Kodi,实现手机APP投屏和IPTV功能
- 2018山西中考计算机软件名称,2018年山西省中考试题
- NCBI中Entrez Direct的使用
- 论文解读:A Hierarchical Framework for Relation Extraction with Reinforcement Learning
- 海洋地球科学开放数据库
- SVN :找不到这样的主机
- SEO——搜索引擎优化
热门文章
- 帷幕的帷是什么意思_CIFF上海虹桥 | 意思设计展墙美术馆入驻建筑模型博物馆...
- 君澜与桐乡乌镇黄金水岸大酒店签署委托管理协议
- 基于微信小程序商店管理系统源码成品(微信小程序毕业设计)
- MapReduce—案例(五)求两两共同好友
- AT5011扫频仪幅度值和电压的转换
- 缓存与数据库的数据更新
- 【教学类-12-05】20221107《连连看横版8*4(1套模板+1套幼儿自绘)适合中班大班)(大班主题《我们的城市》)
- 数学建模 latex 图片以及表格排版整理(overleaf)
- 【已解决】SolidWorks打开stp文件“空模板”问题
- 广东计算机考试只能在学校报名吗,广东计算机等级考试报名地点