JavaScript表单验证和正则表达式
JavaScript表单验证
分为四类:
1.非空验证
常用于用户名等
2.相等验证
常用于验证两次输入的密码
3.范围验证
常用于年龄等 4.正则验证
用于手机号,邮箱号等
以下是实例:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 </head>
7
8 <body>
9 <form action="../0620/lunbo.html" method="post">
10 <div>
11 <div>
12 <div>
13 请输入用户名:
14 </div>
15 <div>
16 <input type="text" name="uid" id="uid" onblur="yanzheng()"/>
17 <span id="tishi"></span>
18 </div>
19 </div>
20 <div>
21 <div>
22 请输入密码:
23 </div>
24 <div>
25 <input type="password" name="uid1" id="uid1" />
26 </div>
27 </div>
28 <div>
29 <div>
30 请再次输入密码:
31 </div>
32 <div>
33 <input type="password" name="uid2" id="uid2" onblur="xiangdeng()"/>
34 <span id="tish2"></span>
35 </div>
36 </div>
37 <div>
38 <div>
39 请输入年龄:
40 </div>
41 <div>
42 <input type="text" name="age" id="age" onblur="nage()"/>
43 <span id="tish3"></span>
44 </div>
45 </div>
46 <div>
47 <div>
48 请输入手机号:
49 </div>
50 <div>
51 <input type="text" name="tel" id="tel" onblur="tell()"/>
52 <span id="tish4"></span>
53 </div>
54 </div>
55
56 <div>
57 <div>
58 <!--双引号里可以直接写js代码,所以可以用return-->
59 <input type="submit" value="提交" onclick="return check()"/>
60 </div>
61 </div>
62 </div>
63 </form>
64 </body>
65 </html>
66 <script>
67 //先执行点击事件,在执行提交
68 function check(){
69 //判断如果没有输入即用户名为空,提示用户名为空并返回false,如果不为空返回true
70 if(document.getElementById("uid").value==""){
71 alert("用户名不能为空!");
72 return false;
73 }else{
74 return true;
75 }
76 }
77
78 function yanzheng(){
79 //非空验证
80 if(document.getElementById("uid").value==""){
81 //给后面的span添加文本并改变文本颜色
82 document.getElementById("tishi").innerText="用户名不能为空";
83 document.getElementById("tishi").style.color="red";
84 }else{
85 document.getElementById("tishi").innerText="用户名可用";
86 document.getElementById("tishi").style.color="green";
87 }
88 }
89 function xiangdeng(){
90 var p1=document.getElementById('uid1');
91 var p2=document.getElementById('uid2');
92 //相等验证
93 if(p1.value==p2.value){
94 document.getElementById("tish2").innerText="输入正确";
95 document.getElementById("tish2").style.color="green";
96 }else{
97 document.getElementById("tish2").innerText="两次输入密码不一致";
98 document.getElementById("tish2").style.color="red";
99 }
100 }
101 function nage(){
102 var a = document.getElementById("age");
103 //范围验证
104 //获取用户输入的值并用parseInt转换为整数进行比较
105 if(parseInt(a.value)>=18 && parseInt(a.value)<=50){
106 document.getElementById("tish3").innerText="输入正确";
107 document.getElementById("tish3").style.color="green";
108 }else{
109 document.getElementById("tish3").innerText="年龄不符合条件";
110 document.getElementById("tish3").style.color="red";
111 }
112 }
113 function tell(){
114 var a = document.getElementById("tel");
115 //正则验证
116 if(a.value.match(/^1[3|4|5|7|8][0-9]{9}$/)==null){
117 document.getElementById("tish4").innerText="手机号不合法";
118 document.getElementById("tish4").style.color="red";
119
120 }else{
121 document.getElementById("tish4").innerText="输入正确";
122 document.getElementById("tish4").style.color="green";
123 }
124 }
125
126 </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'] |
.点 |
匹配除“rn”之外的任何单个字符。要匹配包括“rn”在内的任何字符,请使用像“[sS]”的模式。 |
(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就是匹配位置的)。例如,“erb”可以匹配“never”中的“er”,但不能匹配“verb”中的“er”。 |
B |
匹配非单词边界。“erB”能匹配“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 |
匹配任何不可见字符,包括空格、制表符、换页符等等。等价于[ fnrtv]。 |
S |
匹配任何可见字符。等价于[^ fnrtv]。 |
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-zd]+(.[a-zd]+)*@([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]?dd?).){3}(2[0-4]d|25[0-5]|[01]?dd?)//^(?:(?: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 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 设计模式实战-过滤器模式,你总是这么挑三拣四
- 时间选择器组件之关于table走过的弯路
- 设计模式实战-观察者模式,你知道发布订阅怎么实现吗
- 设计模式实战-桥接模式,想做月老吗?
- 设计模式实战-原型模式,我们就来依法炮制
- 设计模式实战-建造者模式,做任何事情都需要步步为营
- 设计模式实战-单例模式,我就是天下无双
- 设计模式实战-抽象工厂模式,分而治之
- 搞定常被问的数组和排序算法,附面试题
- 玩转 Java 时间 + 面试题
- 【分布式技术】分布式系统调度架构之两层调度,解决单体调度问题
- 一致性哈希算法,在分布式开发中你必须会写,来看完整代码
- FFmpeg 开发(04):FFmpeg + OpenGLES 实现音频可视化播放
- 【Postgres扩展】pg_auto_failover支持高可用性和自动故障转移
- 「PostgreSQL」用MapReduce的方式思考,但使用SQL