form表單驗證和事件


1、表單驗證<form></form>

(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:事件在用戶按下並放開任何字母數字鍵時發生。但是系統按鈕(例如:箭頭鍵、功能鍵)無法得到識別。

正則表達式補充:

建立正則表達式的方法:

var patten= new RegExp(/^[0-9]{17}[0-9|X]$/);/*RegExp()括號里面的式子需要自己定義:

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

2、()里面可以寫一個單詞或者式子

3、{}里面表示數量

4、^:以某個元素開頭,寫在元素前面

5、$:以某個元素結束,寫在元素后面*/

例:

1、正則表達式驗證身份證:

身份證:<input type="text" id="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、正則表達式驗證郵箱:

 

郵箱:<input type="text" id="2" /><input type="button" value="提交" 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- ./?%&=]*)? 

 

 

 

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM