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
}