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 相关文章推荐
不使用中间变量,交换int型的 a, b两个变量的值。
Oct 29 Javascript
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
Sep 21 Javascript
js通过location.search来获取页面传来的参数
Sep 11 Javascript
分享9点个人认为比较重要的javascript 编程技巧
Apr 27 Javascript
Node.js静态文件服务器改进版
Jan 10 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
Feb 21 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
Apr 14 Javascript
AngularJS 实现弹性盒子布局的方法
Aug 30 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
Aug 01 Javascript
微信小程序防止多次点击跳转(函数节流)
Sep 19 Javascript
AJAX XMLHttpRequest对象创建使用详解
Aug 20 Javascript
解决Antd Table组件表头不对齐的问题
Oct 27 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 编写大型网站问题集
2010/05/07 PHP
PHP实现模仿socket请求返回页面的方法
2014/11/04 PHP
PHP序列化的四种实现方法与横向对比
2018/11/29 PHP
用JavaScript获取DOM元素位置和尺寸大小的方法
2013/04/12 Javascript
js中style.display=""无效的解决方法
2014/10/30 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
2015/09/15 Javascript
Jquery 全选反选实例代码
2015/11/19 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
2016/10/28 Javascript
JS实现微信弹出搜索框 多条件查询功能
2016/12/13 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
2016/12/19 Javascript
javascript设计模式之模块模式学习笔记
2017/02/15 Javascript
js仿微博动态栏功能
2017/02/22 Javascript
Angular2利用组件与指令实现图片轮播组件
2017/03/27 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
2017/04/13 Javascript
Angularjs 手写日历的实现代码(不用插件)
2017/10/18 Javascript
详细分析jsonp的原理和实现方式
2017/11/20 Javascript
React中嵌套组件与被嵌套组件的通信过程
2018/07/11 Javascript
Vue使用zTree插件封装树组件操作示例
2019/04/25 Javascript
Angular8 Http拦截器简单使用教程
2019/08/20 Javascript
python发送伪造的arp请求
2014/01/09 Python
python元组操作实例解析
2014/09/23 Python
Python遍历文件夹和读写文件的实现代码
2016/08/28 Python
python 捕获 shell/bash 脚本的输出结果实例
2017/01/04 Python
python机器人运动范围问题的解答
2019/04/29 Python
python实现DEM数据的阴影生成的方法
2019/07/23 Python
Python开发之pip安装及使用方法详解
2020/02/21 Python
详解python tkinter 图片插入问题
2020/09/03 Python
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
2013/01/06 HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
2013/04/25 HTML / CSS
使用Html5中的cavas画一面国旗
2019/09/25 HTML / CSS
夏威夷航空官网:Hawaiian Airlines
2016/09/11 全球购物
Joules美国官网:出色的英国风格
2017/10/30 全球购物
欧洲最大的球衣网上商店:Kitbag
2017/11/11 全球购物
俄罗斯药房连锁店:ASNA
2020/06/20 全球购物
俄罗斯连接商品和买家的在线平台:goods.ru
2020/11/30 全球购物
介绍一下Java的安全机制
2012/06/28 面试题