前端筆記6 表單校驗與正則表達式

表單驗證

爲什麼需要進行表單驗證

用戶書寫 用戶名和密碼 之後 , 最終是需要提交到服務器上的
用戶註冊 QQ 號, 把信息提交各騰訊公司服務器

使用前端驗證的好處

減輕服務器的壓力
保證輸入的數據符合要求

表單驗證的思路

1- 獲得表單元素值
2- 使用JavaScript的一些方法對數據進行判斷
3- 當表單提交時，觸發事件，對獲取的數據進行驗證

案例

驗證 用戶名 不能爲空

// 使用 form 對象 綁定 提交事件
$("form").submit(function(){
    // 不爲空
    if($("#username").val() == ""){
        alert("用戶名不能爲空, 請重新輸入");
        // 使用return true  或 false  來決定 方法是否繼續執行
        return false;
    }
    return true;
});

判斷 用戶名 6- 18 位之間

$("form").submit(function(){
    var value = $("#username").val();
    if(value.length < 6 || value.length > 18){
        alert("用戶名長度必須在 6- 18 位之間!");
        return false;
    }
    return true;
});

郵箱驗證

$("form").submit(function(){
    var value = $("#email").val();
    // 獲取email 中 @ 的下標 和 . 的下標  並且 @ 的下標要在.之前
    var index1 = value.indexOf("@");
    var index2 = value.lastIndexOf(".");
    if(!(index1 != -1 && index2 != -1 && index1 < index2)){
        alert("郵箱不滿足條件!");
        // 使用return true  或 false  來決定 方法是否繼續執行
        return false;
    }
    return true;

手機號必須全部爲數字 第一位爲1 之後 一共10位

// 使用 form 對象 綁定 提交事件
$("form").submit(function(){
    var value = $("#telephone").val();
    // 是否爲 11 位  第一位爲 1  (之後10 位全部爲 數字)
    var len = value.length;
    if(len != 11){
        alert("必須爲11 位");
        return false;
    }
    // 使用字符串截取 第一位
    var first = value.substring(0,1);
    // console.log(first);
    if(first != "1"){
        alert("手機號第一位 必須爲 1");
        return false;
    }
    // 之後10 位都是數字
    for(let i = 1;i < value.length; i++){
        let m = value.substring(i,i+1);
        // isNaN() 函數的含義爲 Not a Number 不是一個數字
        if(isNaN(m)){
            alert("全部數據必須爲數字");
            return false;
        }
    }
});

兩次密碼輸入是否一致

$("form").submit(function(){
    var pwd = $("#pwd").val();
    if (pwd == "") {
        alert("密碼不能爲空");
        return false;
    }
    if (pwd.length < 6) {
        alert("密碼必須等於或大於6個字符");
        return false;
    }
    var repwd = $("#repwd").val();
    if (pwd != repwd) {
        alert("兩次輸入的密碼不一致");
        return false;
    }
})

實現動態提示信息

表單事件

聚焦事件 focus

// 聚焦事件
$("#pwd").focus(function(){
    $(this).next().empty();
    //  $(this).next().html("");
});

失去焦點事件 blur

$("#pwd").blur(function(){
    var mess;
    var pwd = $(this).val();
    if (pwd == "") {
        mess = "密碼不能爲空!!";
        $(this).next().html(mess.fontcolor("red"));
        return;
    }
    if (pwd.length < 6) {
        mess = "密碼長度不能小於 6 個字符!!";
        $(this).next().html(mess.fontcolor("red"));
        return;
    }
    mess = "密碼可用!!";
    $(this).next().html(mess.fontcolor("green"));
});

正則表達式

爲什麼需要正則表達式

簡潔的代碼
嚴謹的驗證文本框中的內容

正則表達式語法

普通語法

語法	描述
單個字符(多個字符)	匹配到該字符的所有字符串
[abcd]或者[a-g]	匹配中括號中出現的任意一個字符
[^a]	取反 只要是在中括號中沒有出現的
(12|ee|ad)	括號表示一個整體
|	或者

特殊符號

符號	描述
/ XXX /	表示一個模式的開始和結束
^	(在中括號外匹配字符串開始) (在中括號內 取反)
$	匹配字符串結束
/^內容$/	一般一個正則表達式的語法
\d	匹配一個數字 等價於[0-9]
\D	除了數字之外的任何字符 等價於[ ^0-9]
\s	任何空白字符
\S	任何非空白字符
\w	匹配一個數字、下劃線或字母字符，等價於[A-Za-z0-9_]
\W	任何非單字字符，等價於[^a-zA-Z0-9_]
.	除了換行之外的任意字符

數量規則

符號	描述
{n}	匹配字符出現了多少次
{n,}	字符串最少出現 n次
{n,m}	字符最少出現n次 最多出現m次
*	等價於 {0,} 匹配前一項0次或多次
+	等價於{1,} 匹配前一項1次或多次
?	等價於{0,1} 匹配前一項0次或1次

手機號的正則規範

1[35678]\d{9}

JS 中的 正則表達式應用

案例

$("#telephone").blur(function(){
    // 定義一個正則表達式
    var reg = /^1[35678]\d{9}$/;
    var tele = $(this).val();
    // test() 方法  滿足正則 返回 true  不滿足返回false
    // alert(reg.test(tele));
    if(reg.test(tele)){
        $(this).next().html("手機號可用".fontcolor("green"));
    }else{
        $(this).next().html("手機號有誤".fontcolor("red"));
    }
});

郵箱的正則規範

用戶名、密碼、電子郵箱、手機號碼、身份證號碼、生日、郵政編碼、固定電話

正則表達式的定義方式

第一種

var reg = /^$/;
var reg = /^1[35678]\\d{9}$/;

第二種 (構造)

var reg = new RegExp("");
var reg = new RegExp("^1[35678]\\d{9}$");

可傳參數

g : 進行全局匹配
i : 不區分大小寫匹配
m : 可以進行多行匹配

var reg = /^1[35678]\\d{9}$/g;
var reg = new RegExp("^1[35678]\\d{9}$","g");

常用方法

正則表達式的方法 test()

正則表達式對象.test(字符串)

字符串中方法 match()

字符串 .match(正則表達式對象)

年齡驗證

0 - 120 之間

var regAge = /^120$|^((1[0-1]|[1-9])?\d)$/m;
^120$ 
^((1[0-1]|[1-9])?\d)$    ( 0 - 119)