Javascript的表单验证-揭开正则表达式的面纱


Posted in Javascript onMarch 18, 2016

推荐阅读:Javascript的表单验证长度

Javascript的表单验证-提交表单

Javascript的表单验证-初识正则表达式

在上篇文章给大家介绍了javascript的表单验证-初识正则表达式,本文给大家介绍Javascript的表单验证-揭开正则表达式的面纱,具体详情请看全文。

用元字符匹配相应的字符类型

创建正则表达式有点像创建字符串字面量,只不过正则表达式出现在一对”/”里

正则表达式中会用到一级元字符,用于连接字母与数字

“.” 匹配任何字符,除换行符外

“\d”匹配任何数字字符

“\w”匹配任何字母或数字字符

“\s”匹配空格

“^”字符串需以模式起始

“$”字符串需以模式结束

元字符不只表示一个字面量字符,它乃是用于构建正则表达式的符号

例:这里有三个字符

“A”,”7”,”%”

/\w/可以匹配”A”,”7”

/^\d/可以匹配”7”

/\d/可以匹配”7”

/./可以匹配”A”,”7”,”%”

但是包含多个字符的字符串怎么办?

“2nite”,”007”,”catch22”,

/^\d/可匹配到”2nite”,”007”(开头都是数字)

/\d\d\d/可匹配”007”(一行中有3个数字)

/^cat/可匹配”catch22”(以cat字符开头)

/\d\d$/可匹配”catch22”(必须以两个数字来结尾)

例如:匹配美国邮编,邮编格式为#####-####

/^\d\d\d\d\d-\d\d\d\d$/

用限定符指定字符出现的次数

限定符用于控件子模式出现于正则表达式里的次数

限定符前为子模式,限定符即应用在子模式,并控制子模式出现在模式里的次数

“*”限定符前的子模式必须出现0次或多次

“+”限定符前的子模式必须出现1次或多次

“?”限定符前的子模式必须出现0次或1次

“{n}”限定符前的子模式必须恰好出现N次

“()”集合字符或/和元字符,成为子模式

同样是以邮政编码为例

/^\d{5}-\d{4}$/

可以看出,加上限定符的表达式比只有元字符的表达式更加的精准

/\w*/匹配任何字母数字字符,包括空字符串

/.+/匹配一个出现一次以上的字符串(用于匹配非非空的字符串)

/(Hot)??Donuts/可匹配出Hot或Donuts

*在正则表达式里想要匹配具有特殊意义的字符的时候,可以用反斜杠

例如匹配$:\$*

利用正则表达式验证数据

JavaScript里的正则表达式由RegExp对象表示,其中包含使用正则表达式验证数据的关键?test()方法,它检查字符串里是否存在指定的模式

例:

var regex=/^\d{5}$/;//匹配5位数邮政编码的正则表达式;

正则表达式对象字面量自动合建RegExp对象

if(!regex.test(inputFiled.value)) 
{ 
//在正则表达式上调用text方法 
//如果符合合正则表达式的要求,返回true 
//如果不符合正则表达式的要求,返回false 
}

代码案例

接下来,写一个专门用来验证字符串格式的方法

//regex正则表达式
//inputStr需要验证的字符串
//helpText提供信息提示的一个span标签
//helpMessage提示信息内容
//
function validateRegExp(regex,inputStr,helpText,helpMessage)
{
if(!regex.test(inputStr))
{
if(helpText!=null)
helpText.innerHTML=helpMessage;
return false;
}
else{
if(helpText!=null)
helpText.innerHTML="";
}
return true;
}
function validateDate(inputFild,helpText)
{
if(!validateNonEmpty(inputFild,helpText)//先检查参数是非空的
{
return false;
}
return validateRegExp(/^\d{2}\/\d{2}\/\d{4}$/,inputFild,helpText,"请输入正确的日期格式");//调用正则验证方法
}

好了,本文到此结束,感谢大家对三水点靠木网站支持!

Javascript 相关文章推荐
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
Jan 23 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
May 29 Javascript
一个检测表单数据的JavaScript实例
Oct 31 Javascript
jQuery+html5实现div弹出层并遮罩背景
Apr 15 Javascript
JavaScript操作class和style样式代码详解
Feb 13 Javascript
jQuery文字提示与图片提示效果实现方法
Jul 04 Javascript
详解webpack自动生成html页面
Jun 29 Javascript
深入理解vue-router之keep-alive
Aug 31 Javascript
Three.js开发实现3D地图的实践过程总结
Nov 20 Javascript
JS 中document.write()的用法和清空的原因浅析
Dec 04 Javascript
angularJs中$scope数据序列化的实例
Sep 30 Javascript
JavaScript代码调试方法实例小结
Jan 05 Javascript
Javascript的表单验证-初识正则表达式
Mar 18 #Javascript
Javascript的表单验证-提交表单
Mar 18 #Javascript
Javascript的表单与验证-非空验证
Mar 18 #Javascript
悬浮广告方法日常收集整理
Mar 18 #Javascript
Js与Jq获取浏览器和对象值的方法
Mar 18 #Javascript
深入理解JavaScript程序中内存泄漏
Mar 17 #Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
Mar 17 #Javascript
You might like
如何用PHP实现插入排序?
2013/04/10 PHP
PHPMailer邮件发送的实现代码
2013/05/04 PHP
解析数组非数字键名引号的必要性
2013/08/09 PHP
Destoon实现多表查询示例
2014/08/21 PHP
PHP模板引擎Smarty中变量的使用方法示例
2016/04/11 PHP
JavaScript DOM 学习第三章 内容表格
2010/02/19 Javascript
firebug的一个有趣现象介绍
2011/11/30 Javascript
JS实现的论坛Ajax打分效果完整实例
2015/10/31 Javascript
JavaScript必知必会(二) null 和undefined
2016/06/08 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
2016/09/17 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
2016/12/22 Javascript
老生常谈的跨域处理
2017/01/11 Javascript
通过js修改input、select默认字体颜色
2017/04/19 Javascript
css和js实现弹出登录居中界面完整代码
2017/11/26 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
2018/04/17 Javascript
vue项目base64字符串转图片的实现代码
2018/07/13 Javascript
记一次vue-webpack项目优化实践详解
2019/02/17 Javascript
Element-UI中Upload上传文件前端缓存处理示例
2019/02/21 Javascript
JS学习笔记之原型链和利用原型实现继承详解
2019/05/29 Javascript
从零搭一个自用的前端脚手架的方法步骤
2019/09/23 Javascript
如何在selenium中使用js实现定位
2020/08/18 Javascript
django之状态保持-使用redis存储session的例子
2019/07/28 Python
python为什么会环境变量设置不成功
2020/06/23 Python
python实现快速文件格式批量转换的方法
2020/10/16 Python
巧用CSS3的calc()宽度计算做响应模式布局的方法
2018/03/22 HTML / CSS
StubHub美国:购买或出售您的门票
2019/07/09 全球购物
Sql面试题
2013/03/20 面试题
求职简历自荐信范文
2013/10/21 职场文书
英语教师岗位职责
2014/03/16 职场文书
保护环境标语
2014/06/09 职场文书
运动会加油稿100字
2014/09/19 职场文书
公民代理授权委托书
2014/09/24 职场文书
2016年小学生清明节广播稿
2015/12/17 职场文书
pytorch实现ResNet结构的实例代码
2021/05/17 Python
如何用Python搭建gRPC服务
2021/06/30 Python
MySQL普通表如何转换成分区表
2022/05/30 MySQL