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 相关文章推荐
asp 的 分词实现代码
May 24 Javascript
jQuery滚动加载图片效果的实现
Mar 06 Javascript
JS实现淘宝幻灯片效果的实现方法
Mar 22 Javascript
js获取内联样式的方法
Jan 27 Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
May 10 Javascript
用JS中split方法实现彩色文字背景效果实例
Aug 24 Javascript
jsp 网站引入外部css或者js失效问题解决
Oct 31 Javascript
jQuery焦点图左右转换效果
Dec 12 Javascript
Bootstrap面板学习使用
Feb 09 Javascript
原生JS轮播图插件
Feb 09 Javascript
JS使用cookie保存用户登录信息操作示例
May 30 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
Sep 03 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
ThinkPHP与PHPExcel冲突解决方法
2011/08/08 PHP
php获得客户端浏览器名称及版本的方法(基于ECShop函数)
2015/12/23 PHP
Laravel模型间关系设置分表的方法示例
2018/04/21 PHP
thinkphp5使html5实现动态跳转的例子
2019/10/16 PHP
自己的js工具_Form 封装
2009/08/21 Javascript
在VS2008中使用jQuery智能感应的方法
2010/12/30 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
2013/08/28 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
2013/11/19 Javascript
JavaScript定时器和优化的取消定时器方法
2015/07/03 Javascript
纯JS实现弹性导航条效果
2017/03/06 Javascript
vue数据双向绑定原理解析(get & set)
2017/03/08 Javascript
vue组件编写之todolist组件实例详解
2018/01/22 Javascript
微信小程序上线发布流程图文详解
2019/05/06 Javascript
vue项目或网页上实现文字转换成语音播放功能
2020/06/09 Javascript
python练习程序批量修改文件名
2014/01/16 Python
python 异常处理总结
2016/10/18 Python
Python通过调用mysql存储过程实现更新数据功能示例
2018/04/03 Python
mac下pycharm设置python版本的图文教程
2018/06/13 Python
TensorFlow——Checkpoint为模型添加检查点的实例
2020/01/21 Python
pytorch实现Tensor变量之间的转换
2020/02/17 Python
Python通过两个dataframe用for循环求笛卡尔积
2020/04/29 Python
Scrapy基于scrapy_redis实现分布式爬虫部署的示例
2020/09/29 Python
浅谈CSS3 动画卡顿解决方案
2019/01/02 HTML / CSS
小米乌克兰网上商店:Xiaomi.UA
2019/10/29 全球购物
值类型与引用类型有什么不同?请举例说明?并分别列举几种相应的数据类型
2015/10/24 面试题
生物制药毕业生自荐信
2013/10/16 职场文书
开办加工厂创业计划书
2014/01/03 职场文书
医科大学毕业生自荐信
2014/02/03 职场文书
党风廉设责任书
2014/04/16 职场文书
我爱家乡演讲稿
2014/09/12 职场文书
绿色校园广播稿
2014/10/13 职场文书
长城英文导游词
2015/01/30 职场文书
小学班长竞选稿
2015/11/20 职场文书
如何使用Tkinter进行窗口的管理与设置
2021/06/30 Python
Python实现学生管理系统并生成exe可执行文件详解流程
2022/01/22 Python
改造DE1103三步曲
2022/04/07 无线电