HTML 表單和驗證事件

WBOY
發布: 2016-09-12 17:27:13
原創
1461 人瀏覽過

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板