HTML 表单和验证事件
1、表单验证
(1).非空验证(去空格)
(2).对比验证(跟一个值对比)
(3).范围验证(根据一个范围进行判断)
(4).固定格式验证:电话号码,身份证号,邮箱,信用卡号等的验证;需要用到正则表达式来进行验证。
(5).其它验证
2、正则表达式
用符号来描述书写规则:/ 中间写正则表达式 /
^ :匹配开头, : 匹 配 结 尾 ; / v e / 以 v e 开 头 的 / v e :匹配结尾 ; /^ve/以ve开头的 /ve :匹配结尾;/ve/以ve开头的/ve/以ve结尾
\d:一个任意的数字
\w:一个任意的数字或字母
\s:一个任意的字符串
{n}:把左边的表达式重复n遍
{m,n}:把左边的表达式重复至少m遍,至多n遍
{m, }:把左边的表达式重复至少m遍,,至多不限
+:左边的表达式,至少出现一次,至多不限,相当于{1,}
*:左边的表达式,至少出现0次,至多不限,相当于{0,}
?:左边的表达式,至少出现0次,至多出现1次,相当于{0,1}
[a,b,c]:只能取方括号中内容之一
[a-z]或[1-9]:在范围中取其一
|:代表或者; ():优先级; \:转义–“( )”这个才是要出现的小括号,需要转义
3、事件
事件有三要素:事件源、事件数据、事件处理程序
可以加return false;是阻止默认操作
onclick: 鼠标单击触发
ondblclick: 双击触发
onmouseover: 鼠标移动上面触发
onmouseout: 鼠标离开时触发
onmousemove: 鼠标在上面移动时触发
onchange: 只要内容改变触发
onblur: 失去焦点时触发
onfocus: 获得焦点时触发
onkeydown: 按键按下的时候触发
onkeyup:按键抬起来的时候触发
onkeypress:事件在用户按下并放开任何字母数字键时发生。但是系统按钮(例如:箭头键、功能键)无法得到识别。
例子:根据正则表达式验证邮箱
function checkemail() { var v4 = trim(u4.value); var reg = /^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$/; if(v4.match(reg) != null) { imgs4.setAttribute(“src”,“imges/1.png”); return true; } else { imgs4.setAttribute(“src”,“imges/2.png”); return false; } }
正则表达式补充:
建立正则表达式的方法:
var patten= new RegExp(/1{17}[0-9|X]$/);/*RegExp()括号里面的式子需要自己定义:
1、[]里面只有一个元素
2、()里面可以写一个单词或者式子3、{}里面表示数量
4、^:以某个元素开头,写在元素前面
5、$:以某个元素结束,写在元素后面*/
例:
1、正则表达式验证身份证:
身份证:
/javascript部分/
var a= document.getElementById(“1”).value; var patten= new RegExp(/2{17}[0-9|X]$/);
if(patten.test(a))
{ alert(“输入正确”); }
else
{ alert(“输入错误”); }
2、正则表达式验证邮箱:
邮箱:
function mail()
{
var patten2= new RegExp(/3{1,17}[@][0-9|A-z]{1,3}.(com)$/)
var mail = document.getElementById(“2”).value;
if(patten2.test(mail))
{ alert(“输入正确”); }
else
{ alert(“输入错误”); }
}
常用正则表达式:
匹配国内电话号码:d{3}-d{8}|d{4}-d{7}
评注:匹配形式如 0511-4405222 或 021-87888822
匹配腾讯QQ号:[1-9][0-9]{4,}
评注:腾讯QQ号从10000开始
匹配中国邮政编码:[1-9]d{5}(?!d)
评注:中国邮政编码为6位数字
匹配身份证:d{15}|d{18}
评注:中国的身份证为15位或18位
匹配ip地址:d+.d+.d+.d+
评注:提取ip地址时有用
匹配特定数字:
4d*$ //匹配正整数
^-[1-9]d*$ //匹配负整数
^-?[1-9]d*$ //匹配整数
5d*|0$ //匹配非负整数(正整数 + 0)
^-[1-9]d*|0$ //匹配非正整数(负整数 + 0)
6d*.d*|0.d*[1-9]d*$ //匹配正浮点数
^-([1-9]d*.d*|0.d*[1-9]d*)$ //匹配负浮点数
^-?([1-9]d*.d*|0.d*[1-9]d*|0?.0+|0)$ //匹配浮点数
7d*.d*|0.d*[1-9]d*|0?.0+|0$ //匹配非负浮点数(正浮点数 + 0)
^(-([1-9]d*.d*|0.d*[1-9]d*))|0?.0+|0$ //匹配非正浮点数(负浮点数 + 0)
评注:处理大量数据时有用,具体应用时注意修正
匹配特定字符串:
8+$ //匹配由26个英文字母组成的字符串
9+$ //匹配由26个英文字母的大写组成的字符串
10+$ //匹配由26个英文字母的小写组成的字符串
11+$ //匹配由数字和26个英文字母组成的字符串
^w+$ //匹配由数字、26个英文字母或者下划线组成的字符串
在使用RegularExpressionValidator验证控件时的验证功能及其验证表达式介绍如下:
只能输入数字:“12
”
只
能
输
入
n
位
的
数
字
:
“
d
n
” 只能输入n位的数字:“^d{n}
”只能输入n位的数字:“dn”
只能输入至少n位数字:“^d{n,}
”
只
能
输
入
m
−
n
位
的
数
字
:
“
d
m
,
n
” 只能输入m-n位的数字:“^d{m,n}
”只能输入m−n位的数字:“dm,n”
只能输入零和非零开头的数字:“^(0|[1-9][0-9])
”
只
能
输
入
有
两
位
小
数
的
正
实
数
:
“
[
0
−
9
]
+
(
.
[
0
−
9
]
2
)
?
” 只能输入有两位小数的正实数:“^[0-9]+(.[0-9]{2})?
”只能输入有两位小数的正实数:“[0−9]+(.[0−9]2)?”
只能输入有1-3位小数的正实数:“13+(.[0-9]{1,3})?
”
只
能
输
入
非
零
的
正
整
数
:
“
+
?
[
1
−
9
]
[
0
−
9
]
∗
” 只能输入非零的正整数:“^+?[1-9][0-9]*
”只能输入非零的正整数:“+?[1−9][0−9]∗”
只能输入非零的负整数:“^-[1-9][0-9]
”
只
能
输
入
长
度
为
3
的
字
符
:
“
.
3
” 只能输入长度为3的字符:“^.{3}
”只能输入长度为3的字符:“.3”
只能输入由26个英文字母组成的字符串:“14+
”
只
能
输
入
由
26
个
大
写
英
文
字
母
组
成
的
字
符
串
:
“
[
A
−
Z
]
+
” 只能输入由26个大写英文字母组成的字符串:“^[A-Z]+
”只能输入由26个大写英文字母组成的字符串:“[A−Z]+”
只能输入由26个小写英文字母组成的字符串:“15+
”
只
能
输
入
由
数
字
和
26
个
英
文
字
母
组
成
的
字
符
串
:
“
[
A
−
Z
a
−
z
0
−
9
]
+
” 只能输入由数字和26个英文字母组成的字符串:“^[A-Za-z0-9]+
”只能输入由数字和26个英文字母组成的字符串:“[A−Za−z0−9]+”
只能输入由数字、26个英文字母或者下划线组成的字符串:“^w+
”
验
证
用
户
密
码
:
“
[
a
−
z
A
−
Z
]
w
5
,
17
” 验证用户密码:“^[a-zA-Z]w{5,17}
”验证用户密码:“[a−zA−Z]w5,17”正确格式为:以字母开头,长度在6-18之间,
只能包含字符、数字和下划线。
验证是否含有^%&’’,;=?KaTeX parse error: Expected group after '^' at position 8: "等字符:“[^̲%&'',;=?x22]+”
只能输入汉字:“16,{0,}
”
验
证
E
m
a
i
l
地
址
:
“
w
+
[
−
+
.
]
w
+
)
∗
@
w
+
(
[
−
.
]
w
+
)
∗
.
w
+
(
[
−
.
]
w
+
)
∗
” 验证Email地址:“^w+[-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*
”验证Email地址:“w+[−+.]w+)∗@w+([−.]w+)∗.w+([−.]w+)∗”
验证InternetURL:“^http://([w-]+.)+[w-]+(/[w-./?%&=])?
”
验
证
电
话
号
码
:
“
(
(
d
3
,
4
)
∣
d
3
,
4
−
)
?
d
7
,
8
” 验证电话号码:“^((d{3,4})|d{3,4}-)?d{7,8}
”验证电话号码:“((d3,4)∣d3,4−)?d7,8”
正确格式为:“XXXX-XXXXXXX”,“XXXX-XXXXXXXX”,“XXX-XXXXXXX”,
“XXX-XXXXXXXX”,“XXXXXXX”,“XXXXXXXX”。
验证身份证号(15位或18位数字):“^d{15}|d{}18
”
验
证
一
年
的
12
个
月
:
“
(
0
?
[
1
−
9
]
∣
1
[
0
−
2
]
)
” 验证一年的12个月:“^(0?[1-9]|1[0-2])
”验证一年的12个月:“(0?[1−9]∣1[0−2])”正确格式为:“01”-“09”和“1”“12”
验证一个月的31天:“^((0?[1-9])|((1|2)[0-9])|30|31)
”
正
确
格
式
为
:
“
01
”
“
09
”
和
“
1
”
“
31
”
。
匹
配
中
文
字
符
的
正
则
表
达
式
:
[
u
4
e
00
−
u
9
f
a
5
]
匹
配
双
字
节
字
符
(
包
括
汉
字
在
内
)
:
[
x
00
−
x
f
f
]
匹
配
空
行
的
正
则
表
达
式
:
n
[
s
∣
]
∗
r
匹
配
H
T
M
L
标
记
的
正
则
表
达
式
:
/
<
(
.
∗
)
>
.
∗
∣
<
(
.
∗
)
/
>
/
匹
配
首
尾
空
格
的
正
则
表
达
式
:
(
s
∗
)
∣
(
s
∗
” 正确格式为:“01”“09”和“1”“31”。 匹配中文字符的正则表达式: [u4e00-u9fa5] 匹配双字节字符(包括汉字在内):[^x00-xff] 匹配空行的正则表达式:n[s| ]*r 匹配HTML标记的正则表达式:/<(.*)>.*|<(.*) />/ 匹配首尾空格的正则表达式:(^s*)|(s*
”正确格式为:“01”“09”和“1”“31”。匹配中文字符的正则表达式:[u4e00−u9fa5]匹配双字节字符(包括汉字在内):[x00−xff]匹配空行的正则表达式:n[s∣]∗r匹配HTML标记的正则表达式:/<(.∗)>.∗∣<(.∗)/>/匹配首尾空格的正则表达式:(s∗)∣(s∗)
匹配Email地址的正则表达式:w+([-+.]w+)@w+([-.]w+).w+([-.]w+)*
匹配网址URL的正则表达式:http://([w-]+.)+[w-]+(/[w- ./?%&=]*)?