HTML 表單驗證和事件


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

例子:根據正則表達式驗證郵箱

   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()括號里面的式子需要自己定義:
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