HTML(六)——表單驗證、正則表達式、事件

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

(1).非空驗證（去空格）

(2).對比驗證（跟一個值對比）

(3).範圍驗證（根據一個範圍進行判斷）

(4).固定格式驗證：電話號碼，身份證號，郵箱，信用卡號等的驗證；須要用到正則表達式來進行驗證。

(5).其它驗證

二、正則表達式

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

^ ：匹配開頭，$：匹配結尾 ； /^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]：在範圍中取其一

|：表明或者； （）：優先級； \：轉義--「\( \)」這個纔是要出現的小括號，須要轉義

三、事件

事件有三要素：事件源、事件數據、事件處理程序

能夠加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()括號裏面的式子須要本身定義：

一、[]裏面只有一個元素

二、()裏面能夠寫一個單詞或者式子
三、{}裏面表示數量 
四、^：以某個元素開頭，寫在元素前面 
五、$：以某個元素結束，寫在元素後面*/

 例：

一、正則表達式驗證身份證：

 身份證：<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("輸入錯誤");

  }

 二、正則表達式驗證郵箱：

 郵箱：<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- ./?%&=]*)?