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 函数式编程的原理
Oct 16 Javascript
jQuery Tips 为AJAX回调函数传递额外参数的方法
Dec 28 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
Sep 14 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
May 15 Javascript
js获取input标签的输入值实现代码
Aug 05 Javascript
解析Javascript中大括号“{}”的多义性
Dec 02 Javascript
详解参数传递四种形式
Jul 21 Javascript
React数据传递之组件内部通信的方法
Dec 31 Javascript
Angular6 写一个简单的Select组件示例
Aug 20 Javascript
从vue源码解析Vue.set()和this.$set()
Aug 30 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
Jun 11 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
Sep 02 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
Terran兵种对照表
2020/03/14 星际争霸
php 使用GD库为页面增加水印示例代码
2014/03/24 PHP
PHP批量生成静态HTML的简单原理和方法
2014/04/20 PHP
PHP封装curl的调用接口及常用函数详解
2018/05/31 PHP
PDO::rollBack讲解
2019/01/29 PHP
js 浮动层菜单收藏
2009/01/16 Javascript
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
JS随即打乱数组实现代码
2012/12/03 Javascript
JavaScript生成GUID的多种算法小结
2013/08/18 Javascript
js 走马灯简单实例
2013/11/21 Javascript
jquery选择器之基本过滤选择器详解
2014/01/27 Javascript
jQuery实现当按下回车键时绑定点击事件
2014/01/28 Javascript
javascript解析json实例详解
2014/11/05 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
2016/06/16 Javascript
vue父组件异步获取数据传给子组件的方法
2018/07/26 Javascript
在vue中给列表中的奇数行添加class的实现方法
2018/09/05 Javascript
js使用formData实现批量上传
2020/03/27 Javascript
基于JavaScript获取base64图片大小
2019/10/18 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
2020/07/22 Javascript
Python基于辗转相除法求解最大公约数的方法示例
2018/04/04 Python
python使用Plotly绘图工具绘制水平条形图
2020/03/25 Python
Python 数据可视化pyecharts的使用详解
2019/06/26 Python
详解python调用cmd命令三种方法
2019/07/08 Python
如何在sublime编辑器中安装python
2020/05/20 Python
python 如何读、写、解析CSV文件
2021/03/03 Python
CSS3让登陆面板3D旋转起来
2016/05/03 HTML / CSS
abstract class和interface有什么区别
2013/08/04 面试题
服务之星获奖感言
2014/01/21 职场文书
小学教师节活动方案
2014/01/31 职场文书
国贸专业自荐信范文
2014/03/02 职场文书
市场营销专业大学生职业生涯规划文
2014/03/06 职场文书
高三英语教学计划
2015/01/23 职场文书
副总经理岗位职责
2015/02/02 职场文书
2015应届毕业生求职信范文
2015/03/20 职场文书
会议新闻稿
2015/07/17 职场文书
python识别围棋定位棋盘位置
2021/07/26 Python