HTML 表单和验证事件

HTML 表单和验证事件
1、表单验证

(1).非空验证（去空格）

(2).对比验证（跟一个值对比）

(3).范围验证（根据一个范围进行判断）

(4).固定格式验证：电话号码，身份证号，邮箱，信用卡号等的验证；需要用到正则表达式来进行验证。

(5).其它验证

2、正则表达式

用符号来描述书写规则:/ 中间写正则表达式 /

^ ：匹配开头，$：匹配结尾；{/}^{v}e/以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(/¹{17}[0-9|X]$/);/*RegExp()括号里面的式子需要自己定义：

1、[]里面只有一个元素

2、()里面可以写一个单词或者式子3、{}里面表示数量
4、^：以某个元素开头，写在元素前面
5、$：以某个元素结束，写在元素后面*/

例：

1、正则表达式验证身份证：

身份证：

/javascript部分/

var a= document.getElementById(“1”).value; var patten= new RegExp(/²{17}[0-9|X]$/);

if(patten.test(a))

{ alert(“输入正确”); }

else

{ alert(“输入错误”); }

2、正则表达式验证邮箱：

邮箱：

function mail()

{

var patten2= new RegExp(/³{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地址时有用
匹配特定数字：
⁴d*$ //匹配正整数
^-[1-9]d*$ //匹配负整数
^-?[1-9]d*$ //匹配整数
⁵d*|0$ //匹配非负整数（正整数 + 0）
^-[1-9]d*|0$ //匹配非正整数（负整数 + 0）
⁶d*.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)$ //匹配浮点数
⁷d*.d*|0.d*[1-9]d*|0?.0+|0$ //匹配非负浮点数（正浮点数 + 0）
^(-([1-9]d*.d*|0.d*[1-9]d*))|0?.0+|0$ //匹配非正浮点数（负浮点数 + 0）
评注：处理大量数据时有用，具体应用时注意修正
匹配特定字符串：
⁸+$ //匹配由26个英文字母组成的字符串
⁹+$ //匹配由26个英文字母的大写组成的字符串
¹⁰+$ //匹配由26个英文字母的小写组成的字符串
¹¹+$ //匹配由数字和26个英文字母组成的字符串
^w+$ //匹配由数字、26个英文字母或者下划线组成的字符串
在使用RegularExpressionValidator验证控件时的验证功能及其验证表达式介绍如下:
只能输入数字：“¹²$”只能输入n位的数字：{“}^{d}n$”
只能输入至少n位数字：“^d{n,}$”只能输入m-n位的数字：{“}^{d}m,n$”
只能输入零和非零开头的数字：“^(0|[1-9][0-9])$”只能输入有两位小数的正实数：{“}^{[}0-9]+(.[0-9]2)?$”
只能输入有1-3位小数的正实数：“¹³+(.[0-9]{1,3})?$”只能输入非零的正整数：{“}^{+}?[1-9][0-9]\ast$”
只能输入非零的负整数：“^-[1-9][0-9]$”只能输入长度为3的字符：{“}^{.}3$”
只能输入由26个英文字母组成的字符串：“¹⁴+$”只能输入由26个大写英文字母组成的字符串：{“}^{[}A-Z]+$”
只能输入由26个小写英文字母组成的字符串：“¹⁵+$”只能输入由数字和26个英文字母组成的字符串：{“}^{[}A-Za-z0-9]+$”
只能输入由数字、26个英文字母或者下划线组成的字符串：“^w+$”验证用户密码:{“}^{[}a-zA-Z]w5,17$”正确格式为：以字母开头，长度在6-18之间，
只能包含字符、数字和下划线。
验证是否含有^%&’’,;=?KaTeX parse error: Expected group after '^' at position 8: "等字符：“[^̲%&'',;=?x22]+”
只能输入汉字：“¹⁶,{0,}$”验证Email地址：{“}^w+[-+.]w+)\ast @w+([-.]w+)\ast .w+([-.]w+)\ast$”
验证InternetURL：“^http://([w-]+.)+[w-]+(/[w-./?%&=])?$”验证电话号码：{“}^{(}(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])$”正确格式为：“01”-“09”和“1”“12”
验证一个月的31天：“^((0?[1-9])|((1|2)[0-9])|30|31)$”正确格式为：“01”“09”和“1”“31”。匹配中文字符的正则表达式：[u4e00-u9fa5]匹配双字节字符(包括汉字在内)：{[}^{x}00-xff]匹配空行的正则表达式：n[s|]\ast r匹配HTML标记的正则表达式：/<(.\ast )>.\ast |<(.\ast )/>/匹配首尾空格的正则表达式：{(}^s\ast )|(s\ast$)
匹配Email地址的正则表达式：w+([-+.]w+)@w+([-.]w+).w+([-.]w+)*
匹配网址URL的正则表达式：http://([w-]+.)+[w-]+(/[w- ./?%&=]*)?

---

1. 0-9 ↩︎

2. 0-9 ↩︎

3. 0-9|A-z|_ ↩︎

4. 1-9 ↩︎

5. 1-9 ↩︎

6. 1-9 ↩︎

7. 1-9 ↩︎

8. A-Za-z ↩︎

9. A-Z ↩︎

10. a-z ↩︎

11. A-Za-z0-9 ↩︎

12. 0-9 ↩︎

13. 0-9 ↩︎

14. A-Za-z ↩︎

15. a-z ↩︎

16. u4e00-u9fa5 ↩︎