Javascript的表单验证-揭开正则表达式的面纱
推荐阅读：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,"请输入正确的日期格式");//调用正则验证方法
}
好了，本文到此结束，感谢大家对我们网站支持！
相关推荐
-
正则表达式基本语法及表单验证操作详解【基于JS】
本文实例讲述了正则表达式基本语法及表单验证操作.分享给大家供大家参考,具体如下: 正则表达式是一种可以用于模式匹配和替换的强有力的工具,是数据的有效性验证. 一.基本语法 位于"/"定界符之间的部分就是将要在目标对象中进行匹配的模式.用户只要把希望查找匹配对象的模式内容放入"/"定界符之间即可.为了能够使用户更加灵活的定制模式内容,正则表达式提供了专门的"元字符".所谓元字符就是指那些在正则表达式中具有特殊意义的专用字符,可以用来规定其前导字符(
-
JavaScript 表单验证正则表达式大全[推荐]
具体和函数结合的使用方法,还请查看下篇文章 JavaScript 使用正则表达式进行表单验证的示例代码 复制代码 代码如下: 匹配中文字符的正则表达式: [u4e00-u9fa5] 评注:匹配中文还真是个头疼的事,有了这个表达式就好办了 匹配双字节字符(包括汉字在内):[^x00-xff] 评注:可以用来计算字符串的长度(一个双字节字符长度计2,ASCII字符计1) 匹配空白行的正则表达式:ns*r 评注:可以用来删除空白行 匹配HTML标记的正则表达式:< (S*?)[^>]*>.*?
-
js 常用正则表达式表单验证代码
正则表达式使用详解 简介 简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具.其作用如下:测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或一个信用卡号码模式.这称为数据有效性验证.替换文本.可以在文档中使用一个正则表达式来标识特定文字,然后可以全部将其删除,或者替换为别的文字.根据模式匹配从字符串中提取一个子字符串.可以用来在文本或输入字段中查找特定文字. 基本语法 在对正则表达式的功能和作用有了初步的了解之后,我们就来具体看一下正则表
-
最常用的15个前端表单验证JS正则表达式
在表单验证中,使用正则表达式来验证正确与否是一个很频繁的操作,本文收集整理了15个常用的JavaScript正则表达式,其中包括用户名.密码强度.整数.数字.电子邮件地址(Email).手机号码.身份证号.URL地址. IPv4地址. 十六进制颜色. 日期. QQ号码. 微信号.车牌号.中文正则. 1 用户名正则 //用户名正则,4到16位(字母,数字,下划线,减号) var uPattern = /^[a-zA-Z0-9_-]{4,16}$/; //输出 true console.log(uP
-
JavaScript通过正则表达式实现表单验证电话号码
JavaScript表单验证电话号码,判断一个输入量是否为电话号码,通过正则表达式实现. 复制代码 代码如下: //检查电话号码 function isTel(str){ var reg=/^([0-9]|[\-])+$/g ; if(str.length18){ return false; } else{ return reg.exec(str); } }
-
js正则表达式注册页面表单验证
正则表达式方式的验证方式,这个验证比较标准而且比较全面,不过也是通过点击提交按钮才进行验证,本实例可以这样验证,具体内容如下 也可以这样验证 具体代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>表单验证类Validator v1</title> <style&g
-
Javascript的表单验证-初识正则表达式
推荐阅读:Javascript的表单验证长度 Javascript的表单验证-提交表单 Javascript的表单验证-揭开正则表达式的面纱 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. 验证日期 日期的格式相对特别,不能光凭其长度来验证 常见的日期格式:先以两位数表示日,再以两位数表示月,最后以四位数表示年,期间以斜线分隔. MM/DD/YYYY 博主:怎样设计出验证日期是否符合格式的代码呢? 先来看一下验证日期格式的逻辑吧 将表单域中的值取出,
-
JavaScript 使用正则表达式进行表单验证的示例代码
JavaScript 表单验证正则表达式大全利用正则表达式判断是否是0-9的阿拉伯数字 复制代码 代码如下: function regIsDigit(fData) { var reg = new RegExp("^[0-9]$"); return (reg.test(fData)); } 利用这则表达式获取字符串的长度 复制代码 代码如下: function regDataLength(fData) { var valLength = fData.length; var reg = n
-
JavaScript常用的正则表达式表单验证代码
常用的正则表达式如下: 复制代码 代码如下: "^-?[1-9]\\d*$", //整数 "^[1-9]\\d*$", //正整数 "^-[1-9]\\d*$", //负整数 "^([+-]?)\\d*\\.?\\d+$", //数字 "^[1-9]\\d*|0$", //正数(正整数 + 0) "^-[1-9]\\d*|0$", //负数(负整数 + 0) "^([+-]?)
-
Javascript的表单验证-揭开正则表达式的面纱
推荐阅读:Javascript的表单验证长度 Javascript的表单验证-提交表单 Javascript的表单验证-初识正则表达式 在上篇文章给大家介绍了javascript的表单验证-初识正则表达式,本文给大家介绍Javascript的表单验证-揭开正则表达式的面纱,具体详情请看全文. 用元字符匹配相应的字符类型 创建正则表达式有点像创建字符串字面量,只不过正则表达式出现在一对"/"里 正则表达式中会用到一级元字符,用于连接字母与数字 "." 匹配任何字符,除
-
Javascript的表单验证-提交表单
推荐阅读:Javascript的表单验证长度 Javascript的表单验证-初识正则表达式 Javascript的表单验证-揭开正则表达式的面纱 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. 坏数据不该抵达服务器:提交表单时的验证 表单域对象里有个form特性,它使用数组表示了整份表单的域 假如这里只有一个简单的信息文本框和一个邮政编码框,还有一个提交按钮 <form> <input id="message" name
-
JavaScript 基础表单验证示例(纯Js实现)
验证思路 监听每个input控件的焦点离开(onblue),当焦点离开时调用验证函数,验证后修改第三栏文字,显示符合/不符合并返回true/false 实现代码: index.html <!DOCTYPE html> <html> <head> <title></title> <pnk rel="stylesheet" href="css.css" rel="external nofollo
-
JavaScript实现表单验证功能
本文实例为大家分享了JavaScript实现表单验证功能的具体代码,供大家参考,具体内容如下 以下是JavaScript的表单验证功能,可根据JS代码编写出你想要的HTML和CSS的代码. 关于正则表达式的使用,以及常用的正则表达式,笔者目前还在整理中,后期整理完成后,会将链接放在下面,供大家一起学习. //1.声明变量 var emailObj; var usernameObj; var passwordObj; var confirmObj; var emailMsg; var userna
-
javascript实现表单验证
本文实例讲解了javascript实现表单验证的详细代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <script type="text/j
-
JavaScript实现表单验证示例
HTML表单(form)通常用于收集用户信息,例如姓名,电子邮件地址,位置,年龄等. 但是很可能某些用户可能不会输入您期望的数据.HTML表单验证可以通过JavaScript完成. 为了避免对服务器资源造成不必要的压力,您可以使用JavaScript在客户端(用户系统)上验证表单数据,不正确的信息是不会提交给后台服务器的——这是所谓客户端验证.本文将介绍这种验证 [表单验证一般分为两种方式. 客户端验证:直接在客户端执行JS进行验证,验证的过程中和服务器端没有任何的交互 服务器端验证:页面将验证
-
详解jquery validate实现表单验证 （正则表达式）
一.目的 为了更好地实现人机交互,使用jQuery封装库中的validate插件,在用户填写表单时,可以快速地对用户填写的数据进行验证,并做出反馈. 二.validate插件简介 validate()是插件的核心方法,定义了基本的校验规则和一些有用的配置项. rule:设置表单的验证规则: messages:设置表单不符合验证规则的提示信息: debug:如果这个参数为true,那么表单还会提交,只进行检查,调试时十分方便. required:必填 minlength:最小长度 maxlen
-
Javascript的表单验证长度
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. 该采用什么样的方式对用户作出提醒呢?你一定不想用alert()提示框 在输入域后加一个sqan标签 <input id="phone" name="phone" type="text" size="12" onBlur="validateNonEmptyFun(this,document.getElementById(