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']

.点

匹配除“\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匹配版权符号(&copy;)。

\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]+$/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程理解

正则表达式(二):断言

上面的例子反映了一个明显的正则匹配规则:贪婪匹配,即在符合正则表达式规则的情况下,总会匹配尽量多内容。 如果想使得正则表达式按最小内容匹配,只需要在次数元符号...

4902
来自专栏coding

redis集合类型详解

1853
来自专栏hbbliyong

12个非常有用的JavaScript技巧

在这篇文章中,我将分享12个非常有用的JavaScript技巧。这些技巧可以帮助你减少并优化代码。  1) 使用!!将变量转换成布尔类型 有时,我们需要检查...

2707
来自专栏JavaEdge

后端开发必备JavaScript函数1 Array 对象2 String对象

632
来自专栏Laoqi's Linux运维专列

python3–函数

43911
来自专栏佳爷的后花媛

$this、self和static

$this 只有在类产生实例之后才会存在,我们只是设置一个属性,此时不存在 $this,下图会产生语法错误。

2082
来自专栏Golang语言社区

Golang语言--中间的循环

在Go语言中只有很少的几个控制结构,它没有while或者do-while循环。 但是它有for、switch、if。而且switch接受像for那样可选的初始化...

4217
来自专栏技术博文

JQuery处理json与ajax返回JSON实例

json数据是一种经型的实时数据交互的数据存储方法,使用到最多的应该是ajax与json配合使用了,下面我来给大家介绍jquery处理json数据方法。 JSO...

4886
来自专栏Golang语言社区

【Go 语言社区】go 学习中遇到一些语法问题

1.可变参数,传入数组的饿时候,必须加三个... func sums(nums ...int){} nums := []int{1, 2, 3, 4, 5}...

35311
来自专栏个人随笔

房上的猫:if选择结构

一.基本if结构: ? ?  1.定义:if选择结构是根据条件判断之后再做处理的一种语法结构!  2.逻辑:首先对条件进行判断   >如果为真,则执行代码块 ...

36812

扫码关注云+社区

领取腾讯云代金券