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 相关文章推荐
如何用js控制css中的float的代码
Aug 16 Javascript
jquery 模拟类搜索框自动完成搜索提示功能(改进)
May 24 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
Aug 01 Javascript
基于jQuery实现表格的查看修改删除
Aug 01 Javascript
微信小程序 富文本转文本实例详解
Oct 24 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
Dec 08 Javascript
highcharts 在angular中的使用示例代码
Sep 20 Javascript
vue 项目常用加载器及配置详解
Jan 22 Javascript
layui实现三级导航菜单
Jul 26 Javascript
vue实现公告栏文字上下滚动效果的示例代码
Jun 16 Javascript
JavaScript中的执行环境和作用域链
Sep 04 Javascript
微信小程序实现弹幕墙(祝福墙)
Nov 18 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实现异步数据调用的方法
2015/12/24 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
通过ifame指向的页面高度调整iframe的高度
2006/10/05 Javascript
ArrayList类(增强版)
2007/04/04 Javascript
IE与Firefox在JavaScript上的7个不同写法小结
2009/09/14 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
2013/01/30 Javascript
js编码、解码函数介绍及其使用示例
2013/09/05 Javascript
javascript中验证大写字母、数字和中文
2014/01/15 Javascript
Javascript typeof与instanceof的区别
2016/10/18 Javascript
jQuery EasyUI Draggable拖动组件
2017/03/01 Javascript
vue组件父与子通信详解(一)
2017/11/07 Javascript
使用Vue制作图片轮播组件思路详解
2018/03/21 Javascript
vue和webpack项目构建过程常用的npm命令详解
2018/06/15 Javascript
使用ng-packagr打包Angular的方法示例
2018/09/21 Javascript
JavaScript实现缓动动画
2020/11/25 Javascript
[49:58]完美世界DOTA2联赛PWL S3 Magma vs DLG 第一场 12.18
2020/12/19 DOTA
对Python 2.7 pandas 中的read_excel详解
2018/05/04 Python
python实现时间o(1)的最小栈的实例代码
2018/07/23 Python
python使用pdfminer解析pdf文件的方法示例
2018/12/20 Python
Python二维数组实现求出3*3矩阵对角线元素的和示例
2019/11/29 Python
python文件绝对路径写法介绍(windows)
2019/12/25 Python
Numpy与Pytorch 矩阵操作方式
2019/12/27 Python
Python使用jupyter notebook查看ipynb文件过程解析
2020/06/02 Python
Python xpath表达式如何实现数据处理
2020/06/13 Python
10个python爬虫入门实例(小结)
2020/11/01 Python
如何用python 操作zookeeper
2020/12/28 Python
俄罗斯金苹果网上化妆品和香水商店:Goldapple
2019/12/01 全球购物
计算机专业大学生的自我评价
2013/11/14 职场文书
金融管理专业毕业生求职信
2014/03/12 职场文书
主持人开幕词
2015/01/29 职场文书
会计岗位职责
2015/02/03 职场文书
2015年端午节活动总结
2015/02/11 职场文书
股东大会通知
2015/04/24 职场文书
倡议书范文大全
2015/04/28 职场文书
磁贴还没死, 微软Win11可修改注册表找回Win10开始菜单
2021/11/21 数码科技
Go语言特点及基本数据类型使用详解
2022/03/21 Golang