HTML 表單和驗證事件

2022-09-15 10:45:13 字數 4278 閱讀 9506

1、表單驗證

(1)非空驗證(去空格)

(2)對比驗證(跟乙個值對比)

(3)範圍驗證(根據乙個範圍進行判斷)

(4)固定格式驗證:**號碼,身份證號,郵箱,信用卡號等的驗證;需要用到正規表示式來進行驗證。

(5).其它驗證

2、正規表示式

用符號來描述書寫規則:/ 中間寫正規表示式 /

^ :匹配開頭,$:匹配結尾 ; /^ve/以ve開頭的 /ve$/以ve結尾

\d:乙個任意的數字

\w:乙個任意的數字或字母

\s::把左邊的表示式重複n遍

:把左邊的表示式重複至少m遍,至多n遍

:把左邊的表示式重複至少m遍,,至多不限

+:左邊的表示式,至少出現一次,至多不限,相當於

*:左邊的表示式,至少出現0次,至多不限,相當於

?:左邊的表示式,至少出現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()  

else

}

建立正規表示式的方法:

例:1、正規表示式驗證身份證:

匹配國內**號碼:d-d|d-d

評注:匹配形式如 0511-4405222 

或 021-87888822 

號:[1-9][0-9] 

號從10000

開始位數字

匹配身份證:d|d 

評注:中國的身份證為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

位數字:

「^d$」 

只能輸入m-n

位的數字:

「^d$」 

只能輸入零和非零開頭的數字:「^(0|[1-9][0-9]*)$」 

只能輸入有兩位小數的正實數:「^[0-9]+(.[0-9])?$」 

只能輸入有1-3

位小數的正實數:

「^[0-9]+(.[0-9])?$」 

只能輸入非零的正整數:「^+?[1-9][0-9]*$」 

只能輸入非零的負整數:「^-[1-9][0-9]*$」 

只能輸入長度為3

的字元:

「^.$」 

只能輸入由26

個英文本母組成的字串:

「^[a-za-z]+$」 

只能輸入由26

個大寫英文本母組成的字串:

「^[a-z]+$」 

只能輸入由26

個小寫英文本母組成的字串:

「^[a-z]+$」 

只能輸入由數字和26

個英文本母組成的字串:

「^[a-za-z0-9]+$」 

只能輸入由數字、26

個英文本母或者下劃線組成的字串:

「^w+$」 

驗證使用者密碼:「^[a-za-z]w$」

正確格式為:以字母開頭,長度在

6-18

之間,只能包含字元、數字和下劃線。

驗證是否含有^%&'',;=?$"

等字元:

「[^%&'',;=?$x22]+」 

只能輸入漢字:「^[u4e00-u9fa5],$」 

驗證email

「^w+[-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$」 

驗證interneturl

驗證**號碼:「^((d)|d-)?d$」 

正確格式為:「***x-******x」

,「***x-******xx」

,「***-******x」

,「***-******xx」

,「******x」

,「******xx」

。驗證身份證號(15

位或18

位數字):

「^d|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- ./?%&=]*)? 

表單驗證和事件

正規表示式 用符號來描述書寫的規則 中間寫正規表示式 匹配開頭,匹配結尾 ve 以ve開頭的 ve 以ve結尾 d 任意乙個數字 w 任意乙個數字或者字母 s 任意字串 把左邊的表示式重複n遍 把左邊的表示式重複m遍,至多n遍 把左邊的表示式重複至少,至多不限 左邊的表示式,至少出現一次,至多不限,...

Html5 表單驗證和style css驗證支援

html5 表單驗證和style css驗證支援 看看下面的這個示例 驗證很強大,如果不支援,我們可以使用jquery的驗證模組,而且server端也會做驗證,所以瀏覽器不支援對於頁面沒任何影響。在css中,有幾個偽類可以支援對表單驗證不通過情況下的樣式進行設定 valid invalid requ...

html表單提交事件

在網頁中乙個form裡的輸入框中按回車有時會觸發表單事件,有時不觸發,以下是觸發的各種情形 1 如果表單裡有乙個type submit 或type image 的按鈕,回車鍵生效。2 如果表單裡面只有乙個type text 的input,不管按鈕是什麼type,回車鍵生效。3 如果按鈕不是input...