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