您现在的位置：程式碼之家 >> 編程語言 > >> Java 程式設計 >> J2EE

JavaScript表單驗證框架：基於正則的通用驗證引擎與常用規則庫

編輯：J2EE

核心驗證引擎 `CheckForm()`

通用表單驗證入口，遍歷所有表單元素，針對標記check屬性的字段執行正則匹配：

function CheckForm(oForm) {
    var els = oForm.elements;
    for (var i = 0; i < els.length; i++) {
        if (els[i].check) {                    // 需驗證標記
            var sReg = els[i].check;           // 正則字符串
            var sVal = GetValue(els[i]);       // 通用取值
            var reg = new RegExp(sReg, "i");   // 不區分大小寫編譯
            if (!reg.test(sVal)) {
                alert(els[i].warning);         // 驗證失敗提示
                GoBack(els[i]);                // 聚焦定位
                return false;
            }
        }
    }
    return true;
}

通用取值函數 `GetValue()`

根據元素類型分發取值邏輯：

text/hidden/password/file/textarea → el.value
checkbox/radio → 統計選中數量，以"0"字符串長度表示計數
select-one/select-multiple → 統計非空選中項，同"0"計數法

聚焦定位函數 `GoBack()`

針對不同控件類型執行聚焦：文本類創建TextRange定位末尾，單選/複選聚焦首個同名元素，下拉框直接聚焦。

HTML使用範例

<form onsubmit="return CheckForm(this)">
    test: <input name="test"> 不驗證<br>
    賬號: <input name="id" check="^\S{1,}$" warning="賬號不能為空,且不能含有空格"> 不能為空<br>
</form>

常用正則規則速查表

規則	含義
`^\s+$`	全空白字符（空格/Tab/換行）
`^\S\w{6,}$`	6位以上字母數字下劃線，首字符非空白
`^\d+$`	純數字
`(.*)(\.jpeg\|\.bmp)$`	jpeg/bmp圖片文件
`^\d{4}-\d{2}-\d{2}$`	YYYY-MM-DD日期格式
`^[\s\|\S]{20,}$`	任意字符20位以上

模組化驗證函數庫（按ID驗證）

requiredField(id, msg)：非空驗證
dropCant(id, forbiddenVal, msg)：下拉框禁止特定值
validEmail(id, msg)：Email格式驗證 /^[_a-zA-Z0-9+.]+@([_a-zA-Z0-9]+.)+[a-zA-Z0-9]{2,3}$/
compareValid(id1, id2, msg)：兩字段值相等（密碼確認）
validLength(id, min, max, msg)：長度區間驗證

所有函數遵循：驗證失敗→alert(msg)→focus()→return false模式，易於組合復用。