1. 程式人生 > >JavaScript正則表示式與表單驗證

JavaScript正則表示式與表單驗證

一.非空驗證

判斷非空 最好還是不要使用trim()方法 有的瀏覽器可能不支援


推薦使用正則表示式 判斷是否為空

// " abc "----->"abc "------>"abc"
function trim (txt) {
var afterText = txt.replace(/^\s*/,'').replace(/\s*$/,"");

return afterText;
}

 

 

isNaN(引數) : 如果不是一個數字 返回true


三.驗證郵箱、手機號、郵編...


******************************正則表示式*************************************


^ 以...開始

$ 以...結束


\s 空白 空格 、tab 、回車

\w word 字元

\d digit 數字


[4-9] 表示範圍

表示數量的

* 表示0個或多個

+ 表示1個或多個

? 表示 0個或1個

{5} 5個

{5,} 5個或5個以上

{5,10} 5-10(包含5和10)

 


二.驗證是否是數字

一.什麼是正則表示式


正則表示式 是驗證 字串的一個模板, 它可以驗證 郵箱、手機、郵編....


本身就是字串,例如"aaa" 就是一個最簡單的正則表示式, 只不過這個正則表示式 只能驗證 "aaa"

這個目標字串, 如果一個正則表示式只能驗證一個目標字串,這樣它其實沒有什麼意義..


正則表示式應該是一個可以驗證多個字串的一個模板


二.如何使用正則表示式驗證使用者的輸入


1. 編寫正則表示式

//regularExpression
var regExp = /正則表示式/;

 

2.使用編寫好的正則表示式去驗證 使用者的輸入


var flag = regExp.test(email);//驗證通過 返回true 驗證失敗 返回false


**********************************作業: 使用正則表示式實現使用者註冊頁面**********************************

第一步:

給文字框 繫結一個 onblur 事件 讓它滑鼠移除焦點以後 開始驗證

(1) 修改span中的文字


(2) 美化一下

給span 加一個樣式

error、success


第二步:


給提交按鈕繫結事件 使用者點選提交的時候 執行regist()事件處理函式


(1) 在該函式中 主動呼叫 每個文字框的onblur()事件 讓它驗證一下

(2) 可以通過判斷 樣式值為 "error" 的元素個數 確定是否提交

如果個數>0 證明有錯 不能提交,否則可以提交


第三步:

1. 文字框 獲得焦點的時候 onfocus

2. 使用者輸入字元實時驗證 onkeyup