JavaScript表单验证和正则表达式
JavaScript表单验证
分为四类：
1.非空验证
常用于用户名等
2.相等验证
常用于验证两次输入的密码
3.范围验证
常用于年龄等
4.正则验证
用于手机号，邮箱号等
以下是实例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<form action="../0620/lunbo.html" method="post">
<div>
<div>
<div>
请输入用户名：
</div>
<div>
<input type="text" name="uid" id="uid" onblur="yanzheng()"/>
<span id="tishi"></span>
</div>
</div>
<div>
<div>
请输入密码：
</div>
<div>
<input type="password" name="uid1" id="uid1" />
</div>
</div>
<div>
<div>
请再次输入密码：
</div>
<div>
<input type="password" name="uid2" id="uid2" onblur="xiangdeng()"/>
<span id="tish2"></span>
</div>
</div>
<div>
<div>
请输入年龄：
</div>
<div>
<input type="text" name="age" id="age" onblur="nage()"/>
<span id="tish3"></span>
</div>
</div>
<div>
<div>
请输入手机号：
</div>
<div>
<input type="text" name="tel" id="tel" onblur="tell()"/>
<span id="tish4"></span>
</div>
</div>
<div>
<div>
<!--双引号里可以直接写js代码，所以可以用return-->
<input type="submit" value="提交" onclick="return check()"/>
</div>
</div>
</div>
</form>
</body>
</html>
<script>
//先执行点击事件，在执行提交
function check(){
//判断如果没有输入即用户名为空，提示用户名为空并返回false，如果不为空返回true
if(document.getElementById("uid").value==""){
alert("用户名不能为空！");
return false;
}else{
return true;
}
}
function yanzheng(){
//非空验证
if(document.getElementById("uid").value==""){
//给后面的span添加文本并改变文本颜色
document.getElementById("tishi").innerText="用户名不能为空";
document.getElementById("tishi").style.color="red";
}else{
document.getElementById("tishi").innerText="用户名可用";
document.getElementById("tishi").style.color="green";
}
}
function xiangdeng(){
var p1=document.getElementById('uid1');
var p2=document.getElementById('uid2');
//相等验证
if(p1.value==p2.value){
document.getElementById("tish2").innerText="输入正确";
document.getElementById("tish2").style.color="green";
}else{
document.getElementById("tish2").innerText="两次输入密码不一致";
document.getElementById("tish2").style.color="red";
}
}
function nage(){
var a = document.getElementById("age");
//范围验证
//获取用户输入的值并用parseInt转换为整数进行比较
if(parseInt(a.value)>=18 && parseInt(a.value)<=50){
document.getElementById("tish3").innerText="输入正确";
document.getElementById("tish3").style.color="green";
}else{
document.getElementById("tish3").innerText="年龄不符合条件";
document.getElementById("tish3").style.color="red";
}
}
function tell(){
var a = document.getElementById("tel");
//正则验证
if(a.value.match(/^1[3|4|5|7|8][0-9]{9}$/)==null){
document.getElementById("tish4").innerText="手机号不合法";
document.getElementById("tish4").style.color="red";
}else{
document.getElementById("tish4").innerText="输入正确";
document.getElementById("tish4").style.color="green";
}
}
</script>
拓展-正则表达式：
正则表达式，又称规则表达式。（Regular Expression，在代码中常简写为regex、regexp或RE），计算机科学的一个概念。正则表通常被用来检索、替换那些符合某个模式(规则)的文本。
|
元字符
|
描述
|
|
\
|
将下一个字符标记符、或一个向后引用、或一个八进制转义符。例如，“\\n”匹配\n。“\n”匹配换行符。序列“\\”匹配“\”而“\(”则匹配“(”。即相当于多种编程语言中都有的“转义字符”的概念。
|
|
^
|
匹配输入字符串的开始位置。如果设置了RegExp对象的Multiline属性，^也匹配“\n”或“\r”之后的位置。
|
|
$
|
匹配输入字符串的结束位置。如果设置了RegExp对象的Multiline属性，$也匹配“\n”或“\r”之前的位置。
|
|
*
|
匹配前面的子表达式任意次。例如，zo*能匹配“z”，也能匹配“zo”以及“zoo”。*等价于o{0,}
|
|
+
|
匹配前面的子表达式一次或多次(大于等于1次）。例如，“zo+”能匹配“zo”以及“zoo”，但不能匹配“z”。+等价于{1,}。
|
|
?
|
匹配前面的子表达式零次或一次。例如，“do(es)?”可以匹配“do”或“does”中的“do”。?等价于{0,1}。
|
|
{n}
|
n是一个非负整数。匹配确定的n次。例如，“o{2}”不能匹配“Bob”中的“o”，但是能匹配“food”中的两个o。
|
|
{n,}
|
n是一个非负整数。至少匹配n次。例如，“o{2,}”不能匹配“Bob”中的“o”，但能匹配“foooood”中的所有o。“o{1,}”等价于“o+”。“o{0,}”则等价于“o*”。
|
|
{n,m}
|
m和n均为非负整数，其中n<=m。最少匹配n次且最多匹配m次。例如，“o{1,3}”将匹配“fooooood”中的前三个o为一组，后三个o为一组。“o{0,1}”等价于“o?”。请注意在逗号和两个数之间不能有空格。
|
|
?
|
当该字符紧跟在任何一个其他限制符（*,+,?，{n}，{n,}，{n,m}）后面时，匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串，而默认的贪婪模式则尽可能多的匹配所搜索的字符串。例如，对于字符串“oooo”，“o+”将尽可能多的匹配“o”，得到结果[“oooo”]，而“o+?”将尽可能少的匹配“o”，得到结果 ['o', 'o', 'o', 'o']
|
|
.点
|
匹配除“\r\n”之外的任何单个字符。要匹配包括“\r\n”在内的任何字符，请使用像“[\s\S]”的模式。
|
|
(pattern)
|
匹配pattern并获取这一匹配。所获取的匹配可以从产生的Matches集合得到，在VBScript中使用SubMatches集合，在JScript中则使用$0…$9属性。要匹配圆括号字符，请使用“\(”或“\)”。
|
|
(?:pattern)
|
非获取匹配，匹配pattern但不获取匹配结果，不进行存储供以后使用。这在使用或字符“(|)”来组合一个模式的各个部分时很有用。例如“industr(?:y|ies)”就是一个比“industry|industries”更简略的表达式。
|
|
(?=pattern)
|
非获取匹配，正向肯定预查，在任何匹配pattern的字符串开始处匹配查找字符串，该匹配不需要获取供以后使用。例如，“Windows(?=95|98|NT|2000)”能匹配“Windows2000”中的“Windows”，但不能匹配“Windows3.1”中的“Windows”。预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索，而不是从包含预查的字符之后开始。
|
|
(?!pattern)
|
非获取匹配，正向否定预查，在任何不匹配pattern的字符串开始处匹配查找字符串，该匹配不需要获取供以后使用。例如“Windows(?!95|98|NT|2000)”能匹配“Windows3.1”中的“Windows”，但不能匹配“Windows2000”中的“Windows”。
|
|
(?<=pattern)
|
非获取匹配，反向肯定预查，与正向肯定预查类似，只是方向相反。例如，“(?<=95|98|NT|2000)Windows”能匹配“2000Windows”中的“Windows”，但不能匹配“3.1Windows”中的“Windows”。
|
|
(?<!pattern)
|
非获取匹配，反向否定预查，与正向否定预查类似，只是方向相反。例如“(?<!95|98|NT|2000)Windows”能匹配“3.1Windows”中的“Windows”，但不能匹配“2000Windows”中的“Windows”。这个地方不正确，有问题
此处用或任意一项都不能超过2位，如“(?<!95|98|NT|20)Windows正确，“(?<!95|980|NT|20)Windows 报错，若是单独使用则无限制，如(?<!2000)Windows 正确匹配
|
|
x|y
|
匹配x或y。例如，“z|food”能匹配“z”或“food”(此处请谨慎)。“[z|f]ood”则匹配“zood”或“food”或"zood"。
|
|
[xyz]
|
字符集合。匹配所包含的任意一个字符。例如，“[abc]”可以匹配“plain”中的“a”。
|
|
[^xyz]
|
负值字符集合。匹配未包含的任意字符。例如，“[^abc]”可以匹配“plain”中的“plin”。
|
|
[a-z]
|
字符范围。匹配指定范围内的任意字符。例如，“[a-z]”可以匹配“a”到“z”范围内的任意小写字母字符。
注意:只有连字符在字符组内部时,并且出现在两个字符之间时,才能表示字符的范围; 如果出字符组的开头,则只能表示连字符本身.
|
|
[^a-z]
|
负值字符范围。匹配任何不在指定范围内的任意字符。例如，“[^a-z]”可以匹配任何不在“a”到“z”范围内的任意字符。
|
|
\b
|
匹配一个单词边界，也就是指单词和空格间的位置（即正则表达式的“匹配”有两种概念，一种是匹配字符，一种是匹配位置，这里的\b就是匹配位置的）。例如，“er\b”可以匹配“never”中的“er”，但不能匹配“verb”中的“er”。
|
|
\B
|
匹配非单词边界。“er\B”能匹配“verb”中的“er”，但不能匹配“never”中的“er”。
|
|
\cx
|
匹配由x指明的控制字符。例如，\cM匹配一个Control-M或回车符。x的值必须为A-Z或a-z之一。否则，将c视为一个原义的“c”字符。
|
|
\d
|
匹配一个数字字符。等价于[0-9]。grep 要加上-P，perl正则支持
|
|
\D
|
匹配一个非数字字符。等价于[^0-9]。grep要加上-P，perl正则支持
|
|
\f
|
匹配一个换页符。等价于\x0c和\cL。
|
|
\n
|
匹配一个换行符。等价于\x0a和\cJ。
|
|
\r
|
匹配一个回车符。等价于\x0d和\cM。
|
|
\s
|
匹配任何不可见字符，包括空格、制表符、换页符等等。等价于[ \f\n\r\t\v]。
|
|
\S
|
匹配任何可见字符。等价于[^ \f\n\r\t\v]。
|
|
\t
|
匹配一个制表符。等价于\x09和\cI。
|
|
\v
|
匹配一个垂直制表符。等价于\x0b和\cK。
|
|
\w
|
匹配包括下划线的任何单词字符。类似但不等价于“[A-Za-z0-9_]”，这里的"单词"字符使用Unicode字符集。
|
|
\W
|
匹配任何非单词字符。等价于“[^A-Za-z0-9_]”。
|
|
\xn
|
匹配n，其中n为十六进制转义值。十六进制转义值必须为确定的两个数字长。例如，“\x41”匹配“A”。“\x041”则等价于“\x04&1”。正则表达式中可以使用ASCII编码。
|
|
\num
|
匹配num，其中num是一个正整数。对所获取的匹配的引用。例如，“(.)\1”匹配两个连续的相同字符。
|
|
\n
|
标识一个八进制转义值或一个向后引用。如果\n之前至少n个获取的子表达式，则n为向后引用。否则，如果n为八进制数字（0-7），则n为一个八进制转义值。
|
|
\nm
|
标识一个八进制转义值或一个向后引用。如果\nm之前至少有nm个获得子表达式，则nm为向后引用。如果\nm之前至少有n个获取，则n为一个后跟文字m的向后引用。如果前面的条件都不满足，若n和m均为八进制数字（0-7），则\nm将匹配八进制转义值nm。
|
|
\nml
|
如果n为八进制数字（0-7），且m和l均为八进制数字（0-7），则匹配八进制转义值nml。
|
|
\un
|
匹配n，其中n是一个用四个十六进制数字表示的Unicode字符。例如，\u00A9匹配版权符号（©）。
|
|
\p{P}
|
小写 p 是 property 的意思，表示 Unicode 属性，用于 Unicode 正表达式的前缀。中括号内的“P”表示Unicode 字符集七个字符属性之一：标点字符。
其他六个属性：
L：字母；
M：标记符号（一般不会单独出现）；
Z：分隔符（比如空格、换行等）；
S：符号（比如数学符号、货币符号等）；
N：数字（比如阿拉伯数字、罗马数字等）；
C：其他字符。
*注：此语法部分语言不支持，例：javascript。
|
|
\<
\>
|
匹配词（word）的开始（\<）和结束（\>）。例如正则表达式\<the\>能够匹配字符串"for the wise"中的"the"，但是不能匹配字符串"otherwise"中的"the"。注意：这个元字符不是所有的软件都支持的。 |
| ( ) | 将( 和 ) 之间的表达式定义为“组”（group），并且将匹配这个表达式的字符保存到一个临时区域（一个正则表达式中最多可以保存9个），它们可以用 \1 到\9 的符号来引用。 |
| | | 将两个匹配条件进行逻辑“或”（Or）运算。例如正则表达式(him|her) 匹配"it belongs to him"和"it belongs to her"，但是不能匹配"it belongs to them."。注意：这个元字符不是所有的软件都支持的。 |
常用正则表达式
| 用户名 | /^[a-z0-9_-]{3,16}$/ |
|---|---|
| 密码 | /^[a-z0-9_-]{6,18}$/ |
| 十六进制值 | /^#?([a-f0-9]{6}|[a-f0-9]{3})$/ |
| 电子邮箱 | /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/ /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/ |
| URL | /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/ |
| IP 地址 | /((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)/ /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/ |
| HTML 标签 | /^<([a-z]+)([^<]+)*(?:>(.*)<\/\1>|\s+\/>)$/ |
| 删除代码\\注释 | (?<!http:|\S)//.*$ |
| Unicode编码中的汉字范围 | /^[\u2E80-\u9FFF]+$/ |
JavaScript表单验证和正则表达式的更多相关文章
- JavaScript 表单验证正则表达式大全
JavaScript 表单验证正则表达式大全[转载] 匹配中文字符的正则表达式: [u4e00-u9fa5] 评注:匹配中文还真是个头疼的事,有了这个表达式就好办了 匹配双字节字符(包括汉字在内):[ ...
- JavaScript表单验证年龄
JavaScript表单验证年龄,判断一个输入量是否符合年龄,通过正则表达式实现. //检查年龄 function isAge(str){ var mydate=new Date; var now=m ...
- JavaScript 表单验证 案例
JavaScript 表单验证 案例 版权声明:未经授权,严禁转载! 编写 HTML 文件,搭建主体界面 <html> <head> <meta charset=&q ...
- 前端工具 - 15个最佳的 JavaScript 表单验证库
客户端验证在任何项目都是不够的,因为 JavaScript 可以直接忽略,人们可以提交请求到服务器. 然而这并不意味着客户端验证都没必要了,很多时候我们需要在用户提交到服务器之前给予提示.JavaSc ...
- 15个最佳的 JavaScript 表单验证库
客户端验证在任何项目都是不够的,因为 JavaScript 可以直接忽略,人们可以提交请求到服务器. 然而这并不意味着客户端验证都没必要了,很多时候我们需要在用户提交到服务器之前给予提示.JavaSc ...
- JavaScript 表单验证入门
JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. 被 JavaScript 验证的这些典型的表单数据有: 用户是否已填写表单 ...
- 10个强大的Javascript表单验证插件推荐
创建一个JavaScript表单验证插件,可以说是一个繁琐的过程,涉及到初期设计.开发与测试等等环节.实际上一个优秀的程序员不仅是技术高手,也应该是善假于外物的.本文介绍了10个不错的JavaScri ...
- HTML(六)——表单验证、正则表达式、事件
1.表单验证<form></form> (1).非空验证(去空格) (2).对比验证(跟一个值对比) (3).范围验证(根据一个范围进行判断) (4).固定格式验证:电话号码, ...
- 最常用的15个前端表单验证JS正则表达式
在表单验证中,使用正则表达式来验证正确与否是一个很频繁的操作,本文收集整理了15个常用的JavaScript正则表达式,其中包括用户名.密码强度.整数.数字.电子邮件地址(Email).手机号码.身份 ...
随机推荐
- OC中的copy
copy的概念 Copy的字面意思是"复制"."拷贝",是一个产生副本的过程 对象拷贝的目的:要使用某个对象的数据,但是在修改对象的时候不影响原来的对象内容,常 ...
- 腾讯ISUX网页前端代码分析
看了一下腾讯ISUX网页,无论是pc端还是移动端,展示都挺好看的,先对其代码进行分析如下: 1,先看前三行代码 <!DOCTYPE html> <!-- 腾讯 ISUX 是腾讯集团核 ...
- 关于使用JavaScript实现图片点击切换（附带改变导航图片 方案二）
具体需求见方案一. 这种方案相比方案一更加专业. <!DOCTYPE html> <html> <head lang="en"> <met ...
- 使用Github Page鼓励自己每日编程
动机 三天不练手生,编程的基础训练本身是很枯燥的,需要很多的认真与坚持.无论是Debug的经验,语法规则的记忆,还是各类基础的算法运用,都需要持之以恒的认真.Github的"打卡" ...
- MySQL 的性能（上篇）—— SQL 执行时间分析
简介 文中内容均为阅读前辈的文章所整理而来,参考文章已在最后全指明 本文分为上下两篇: 上篇:MySQL 的 SQL 执行时间分析 下篇:MySQL 性能优化 后端开发必然会接触到数据库,数据层的优劣 ...
- centos永久修改主机名
永久修改主机名 以上的修改只是临时修改,重启后就恢复原样了. 步骤1: 修改/etc/sysconfig/network中的hostname vi /etc/sysconfig/network HOS ...
- Spring-AOP用法总结
前言 Spring AOP的实现方法很多,在项目开发中具体采用什么方式,需要按实际情况来选择,每一种的用法,有其一定的实用价值,所以本文将各种使用方法进行了具体实现.主要包括Advice的be ...
- SQLServer树形数据结构的数据进行数据统计
前言 前几天朋友问我,关于SQLServer数据库中对树形结构的表数据统计问题,需求大致如下: 分类表(递归数据),A的子分类是B,B的子分类是C--分类关系不间断,A为第一层,B为第二层,C为第三层 ...
- 在JLabel上显示图片，并且图片自适应JLabel的大小
本文转载地址: http://blog.csdn.net/xiaoliangmeiny/article/details/7060250 在写<Core Java>上的示例代码时 ...
- OpenCV探索之路（十一）：轮廓查找和多边形包围轮廓
Canny一类的边缘检测算法可以根据像素之间的差异,检测出轮廓边界的像素,但它没有将轮廓作为一个整体.所以要将轮廓提起出来,就必须将这些边缘像素组装成轮廓. OpenCV中有一个很强大的函数,它可以从 ...