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 相关文章推荐
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
Nov 30 Javascript
浅析jquery的js图表组件highcharts
Mar 06 Javascript
DOM基础教程之模型中的模型节点
Jan 19 Javascript
举例讲解如何判断JavaScript中对象的类型
Apr 22 Javascript
canvas实现粒子时钟效果
Feb 06 Javascript
Vue.js结合bootstrap实现分页控件
Mar 10 Javascript
JS交互点击WKWebView中的图片实现预览效果
Jan 05 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
Feb 28 Javascript
微信小程序静默登录的实现代码
Jan 08 Javascript
通过javascript实现扫雷游戏代码实例
Feb 09 Javascript
vue和小程序项目中使用iconfont的方法
May 19 Javascript
Express 配置HTML页面访问的实现
Nov 01 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
DC最新动画电影:《战争之子》为何内容偏激,毁了一个不错的漫画
2020/04/09 欧美动漫
人大复印资料处理程序_补充篇
2006/10/09 PHP
为查询结果建立向后/向前按钮
2006/10/09 PHP
实用函数8
2007/11/08 PHP
PHP+MySQL插入操作实例
2015/01/21 PHP
PHP通过bypass disable functions执行系统命令的方法汇总
2018/05/02 PHP
Yii框架实现对数据库的CURD操作示例
2019/09/03 PHP
thinkphp诸多限制条件下如何getshell详解
2020/12/09 PHP
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
2013/01/23 Javascript
Javascript脚本实现静态网页加密实例代码
2013/11/05 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
2015/05/13 Javascript
jQuery网页选项卡插件rTabs用法实例分析
2015/08/26 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
JS实现的tab切换选项卡效果示例
2017/02/28 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
2018/02/22 Javascript
浅谈Vue响应式(数组变异方法)
2018/05/07 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
2020/03/03 Javascript
vue使用transition组件动画效果的实例代码
2021/01/28 Vue.js
Python中import导入上一级目录模块及循环import问题的解决
2016/06/04 Python
Python语言描述随机梯度下降法
2018/01/04 Python
pycharm在调试python时执行其他语句的方法
2018/11/29 Python
Python设计模式之原型模式实例详解
2019/01/18 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
Python爬虫库requests获取响应内容、响应状态码、响应头
2020/01/25 Python
python实现横向拼接图片
2020/03/23 Python
浅谈Python中的模块
2020/06/10 Python
联想新加坡官方网站:Lenovo Singapore
2017/10/24 全球购物
JD Sports瑞典:英国领先的运动时尚商店
2018/01/28 全球购物
奥林匹克的口号
2014/06/13 职场文书
2014教师年度工作总结
2014/11/10 职场文书
2014幼儿园保育员工作总结
2014/11/10 职场文书
2014年食品安全工作总结
2014/12/04 职场文书
英文辞职信范文
2015/05/13 职场文书
《卧薪尝胆》读后感3篇
2019/12/26 职场文书
python实现简单石头剪刀布游戏
2021/10/24 Python
html5+实现plus.io进行拍照和图片等获取
2022/06/01 HTML / CSS