javascript 基礎 js實現簡單表單驗證

代碼分爲三部分
第一部分

function prepareForms() {
    for(var j=0 ; j<document.forms.length ; j++){
        var this_forms = document.forms[j];
        resetFields(this_forms);
         this_forms.onsubmit = function () {
             return validateForm(this);
        }
    }
}

通過這個函數調用form的提交事件 然後攔截驗證表單 如果爲ture允許提交 如果爲flase 則不觸發提交

function validateForm(whichform) {
    for(var i=0 ; i<whichform.elements.length ; i++){
        var elem = whichform.elements[i];//拿出表單裏面元素節點
        if(elem.required == "required"){
            if(!isFilled(elem)){
                alert("請填寫"+elem.name);
                return false //如果驗證失敗 則跳出窗口並返回false 攔截表單
            }
        }
        if(elem.type == "email"){
            if(!isEmail(elem)){
                alert("確認你的郵箱");
                return false ; //如果驗證失敗 則跳出窗口並返回false 攔截表單
            }
        }

    }
    return true;
}

注意不要把最後元素全部驗證完成後返回的ture放在for循環外面

第三部分 驗證

function isFilled(field) {
    if(field.value.replace(" ","").length == 0) return false; //用空字符串替代空格 檢測長度
    var placeholder = field.placeholder || field.getAttribute("placeholder");
    return(placeholder != field.value); //如果不等於 返回ture 否則false
}



function isEmail(field) {
    return(field.value.indexOf("@") != -1 && field.value.indexOf(".") != -1); //測試是否包含@和.包含爲ture 否則false
}