常用的正則表達式實現表單驗證的代碼示例

表單驗證是網頁開發中的一個重要環節，它可以檢查用戶輸入的數據是否符合要求，從而確保網站的安全性和正確性。如下：

1. 驗證用戶名

// 驗證用戶名
function checkUsername(username) {
    let reg = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/;
    if(reg.test(username)) {
        return true;
    } else {
        return false;
    }
}

2. 驗證密碼

// 驗證密碼
function checkPassword(password) {
    let reg = /^[a-zA-Z]\w{5,17}$/;
    if(reg.test(password)) {
        return true;
    } else {
        return false;
    }
}

3. 驗證手機號碼

// 驗證手機號碼
function checkPhone(phone) {
    let reg = /^1[34578]\d{9}$/;
    if(reg.test(phone)) {
        return true;
    } else {
        return false;
    }
}

4. 驗證郵箱

// 驗證郵箱
function checkEmail(email) {
    let reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
    if(reg.test(email)) {
        return true;
    } else {
        return false;
    }
}

5. 驗證網址

// 驗證網址
function checkUrl(url) {
    let reg = /^https?:\/\/(([a-zA-Z0-9_-])+(\.)?)*(:\d+)?(\/((\.)?(\?)?=?&?[a-zA-Z0-9_-](\?)?)*)*$/i;
    if(reg.test(url)) {
        return true;
    } else {
        return false;
    }
}

6. 驗證身份證號碼

// 驗證身份證號碼
function checkIdCard(idCard) {
    let reg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
    if(reg.test(idCard)) {
        return true;
    } else {
        return false;
    }
}

7. 驗證IP地址

// 驗證IP地址
function checkIp(ip) {
    let reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
    if(reg.test(ip)) {
        return true;
    } else {
        return false;
    }
}

使用方法

• 可以在需要驗證的表單中添加相應的正則表達式，使用表單的onsubmit事件來觸發驗證函數，如果驗證不通過，則返回false，阻止表單提交；
• 也可以使用JavaScript中的正則表達式對象的test()方法來進行驗證，如果驗證不通過，則返回false，可以根據返回值來提示用戶輸入錯誤信息。