好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

HTML表单和验证事件

1、 表单验证

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

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

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

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

(5).其它验证

2、 正则表达式

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

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

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

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

例:

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

身份证:

/*javascript 部分 */

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

if(patten.test(a))

{ alert(" 输入正确 "); }

else

{ alert(" 输入错误 "); }

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

邮箱: 提交 " onclick="mail()" />

function mail()

{

var patten2= new RegExp(/^[0-9|A-z|_]{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 地址时有用
匹配特定数字:
^[1-9]d*$ // 匹配正整数
^-[1-9]d*$ // 匹配负整数
^-?[1-9]d*$ // 匹配整数
^[1-9]d*|0$ // 匹配非负整数(正整数 + 0 )
^-[1-9]d*|0$ // 匹配非正整数(负整数 + 0 )
^[1-9]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)$ // 匹配浮点数
^[1-9]d*.d*|0.d*[1-9]d*|0?.0+|0$ // 匹配非负浮点数(正浮点数 + 0 )
^(-([1-9]d*.d*|0.d*[1-9]d*))|0?.0+|0$ // 匹配非正浮点数(负浮点数 + 0 )
评注:处理大量数据时有用,具体应用时注意修正
匹配特定字符串:
^[A-Za-z]+$ // 匹配由 26 个英文字母组成的字符串
^[A-Z]+$ // 匹配由 26 个英文字母的大写组成的字符串
^[a-z]+$ // 匹配由 26 个英文字母的小写组成的字符串
^[A-Za-z0-9]+$ // 匹配由数字和 26 个英文字母组成的字符串
^w+$ // 匹配由数字、 26 个英文字母或者下划线组成的字符串
在使用 RegularExpressionValidator 验证控件时的验证功能及其验证表达式介绍如下 :
只能输入数字: [^[0-9]*$]
只能输入 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]+(.[0-9]{1,3})?$]
只能输入非零的正整数: [^+?[1-9][0-9]*$]
只能输入非零的负整数: [^-[1-9][0-9]*$]
只能输入长度为 3 的字符: [^.{3}$]
只能输入由 26 个英文字母组成的字符串: [^[A-Za-z]+$]
只能输入由 26 个大写英文字母组成的字符串: [^[A-Z]+$]
只能输入由 26 个小写英文字母组成的字符串: [^[a-z]+$]
只能输入由数字和 26 个英文字母组成的字符串: [^[A-Za-z0-9]+$]
只能输入由数字、 26 个英文字母或者下划线组成的字符串: [^w+$]
验证用户密码 :[^[a-zA-Z]w{5,17}$] 正确格式为:以字母开头,长度在 6-18 之间,
只能包含字符、数字和下划线。
验证是否含有 ^%&'',;=?$" 等字符: [[^%&'',;=?$x22]+]
只能输入汉字: [^[u4e00-u9fa5],{0,}$]
验证 Email 地址: [^w+[-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$]
验证 InternetURL : [^http://([w-]+.)+[w-]+(/[w-./?%&=]*)?$]
验证电话号码: [^((d{3,4})|d{3,4}-)?d{7,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]
匹配双字节字符 ( 包括汉字在内 ) : [^x00-xff]
匹配空行的正则表达式: n[s| ]*r
匹配 HTML 标记的正则表达式: / .*| /
匹配首尾空格的正则表达式: (^s*)|(s*$)
匹配 Email 地址的正则表达式: w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*
匹配网址 URL 的正则表达式: http://([w-]+.)+[w-]+(/[w- ./?%&=]*)?

查看更多关于HTML表单和验证事件的详细内容...

  阅读:30次