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+)*@w+([-. *$/;    if(v4.match(reg) != null)    {        imgs4.setAttribute("src","imges/1.png");     {        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-4405222222222212872727070707207207207207207207207207208 -20820728 -28282 -28282 -28282 -2828212821212121212121212121282   配對騰訊QQ號：
[1-9][0-9]{4,}      註解：騰訊QQ號從開始配對1000中國郵遞區號：[1- 9]d{5}(?!d)  
    評論：中國郵遞區號為6位數字     15位元或
18位
      配對ip 
地址時有用      
符合特定數字：   ^[1-9]d*$      //配對正整數      ^-[1-9]d*$    // 匹配整數      ^[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|00000400020. 1-9]d*))|0?.0+|0$    //配對非正浮點數（負浮點數
+ 0）     注意修正      符合特定字串：
      ^[A-Za-z]+$    // [A-Z]+$    //配對由26個英文字母的大寫組成的字串
      ^[a-z]+$    //接由
^[A-Za-z0-9]+$    //配對由數字和26個英文字母組成的字串  
    ^w+$  字母或底線組成的字串      在使用RegularExpressionValidator驗證控制項時的驗證功能及其驗證表達式介紹如下
:     只能輸入n位元的數字：「^d{n}$」
      
n🜠. 只能輸入m-n位元的數字：「^d{m,n}$」  
    只能輸入零和非零開頭的數字：「^(0|[1-9][0-9 ]*)$”      只能輸入有兩位小數的正實數：「^[0-9]+(.[0-9]{2})?$」      3
位小數的正實數：「^[0-9]+(.[0-9]{1,3})?$」      只能輸入非零的正整數：「^+ ?[1-9][0-9]*$”  
    只能輸入非零的負整數：「^-[1-9][0-9]*$」  
我3的字元：
「^.{3}$」      只能輸入由26個英文字母組成的字串：
「^[A-Z只能輸入由26個大寫英文字母組成的字串：
「^[A-Z]+$」  
    只能輸入由26^ a-z]+$”      只能輸入由數字和
26個英文字母組成的字串：「^[A-Za-z0-9]+$」🎠 26個英文字母或底線組成的字串：
「^w+$」      驗證使用者密碼:「^[a-zA-Z]w{5,17}$」為以字母開頭，長度在6-18
之間，      只能包含字元、數字和底線。       
驗證中是否含有^%&'',;=?$"等字元：「[^%&'',;= 22]+」 ^[u4e00-u9fa5],{0,}$”      
驗證Email位址：「^w+[-+.]w+)*@w+([-.w+「^w+[-+.]w+)*@w+([-.]w+ ]w+)*$”  
驗證InternetURL：「^http://([w-]+.)+[w-]+(/[w-./?%&=]*)?$」  
    驗證電話號碼：「^((d{3,4})|d{3,4}-)?d{7,8}$」  
    正確格式為：「XXXX-XXXXXXX」XXX」「X -XXXXXXXX”，“XXX-XXXXXXX”，  
    「XXX-XXXXXXXX」，「XXX7」XXX7」7」。       驗證身分證號碼（15位元或18
位元數）： 個月： 「^(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]  
    配對雙字節字元      配對空行的正規表示式：n[s| ]*r      符合HTML
標記的正規表示式：/.*|
/.*|首尾空格的正規表示式：(^s*)|(s*$)      符合Email位址的正規表示式：w+([-+.]w+)*@w+([-.]*@w+ w+)*.w+([-.]w+)*      
符合網址URL的正規表示式：
http://([w-]+.)+[w-]+(/[w- ./?%&=]*)?