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 相关文章推荐
CSS+Jquery实现页面圆角框方法大全
Dec 24 Javascript
Google的跟踪代码 动态加载js代码方法应用
Nov 12 Javascript
javascript实现图片切换的幻灯片效果源代码
Dec 12 Javascript
JavaScript+CSS控制打印格式示例介绍
Jan 07 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
Apr 25 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
Oct 28 Javascript
浅析javascript函数表达式
Feb 10 Javascript
JQuery 传送中文乱码问题的简单解决办法
May 24 Javascript
confirm确认对话框的实现方法总结
Jun 17 Javascript
使用node打造自己的命令行工具方法教程
Mar 26 Javascript
原生JS实现的放大镜特效示例【测试可用】
Dec 08 Javascript
详解项目升级到vue-cli3的正确姿势
Jan 28 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 开源AJAX框架14种
2009/08/24 PHP
php实现文件下载(支持中文文名)
2013/12/04 PHP
PHP 函数call_user_func和call_user_func_array用法详解
2014/03/02 PHP
php实现的太平洋时间和北京时间互转的自定义函数分享
2014/08/19 PHP
PHP防止注入攻击实例分析
2014/11/03 PHP
PHP实现动态web服务器方法
2015/07/29 PHP
JS写的数字拼图小游戏代码[学习参考]
2008/10/29 Javascript
JavaScript学习笔记(一) js基本语法
2011/10/25 Javascript
你必须知道的Javascript知识点之"this指针"的应用
2013/04/23 Javascript
简单的两种Extjs formpanel加载数据的方式
2013/11/09 Javascript
Jquery中的层次选择器与find()的区别示例介绍
2014/02/20 Javascript
node.js中的http.response.writeHead方法使用说明
2014/12/14 Javascript
DOM节点深度克隆函数cloneNode()用法实例
2015/01/12 Javascript
使用jQueryMobile实现滑动翻页效果的方法
2015/02/04 Javascript
Node.js实现文件上传
2016/07/05 Javascript
js 将图片连接转换成base64格式的简单实例
2016/08/10 Javascript
基于slideout.js实现移动端侧边栏滑动特效
2016/11/28 Javascript
Bootstrap导航简单实现代码
2017/03/06 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
JS限制输入框输入的实现代码
2018/07/02 Javascript
详解微信JS-SDK选择图片遇到的坑
2018/08/15 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
2018/11/09 Javascript
vue 实现特定条件下绑定事件
2019/11/09 Javascript
整理Python最基本的操作字典的方法
2015/04/24 Python
Python图算法实例分析
2016/08/13 Python
浅谈numpy中linspace的用法 (等差数列创建函数)
2017/06/07 Python
python opencv检测目标颜色的实例讲解
2018/04/02 Python
Python自动抢红包教程详解
2019/06/11 Python
python多线程同步实例教程
2019/08/11 Python
Python 格式化打印json数据方法(展开状态)
2020/02/27 Python
Django使用Profile扩展User模块方式
2020/05/14 Python
HTML5图片预览实例分享
2014/06/04 HTML / CSS
Java里面如何把一个Array数组转换成Collection, List
2013/07/26 面试题
党政领导班子群众路线对照检查材料思想汇报
2014/09/27 职场文书
工会2014法制宣传日活动总结
2014/11/01 职场文书
公司财务管理制度
2015/08/04 职场文书