代码分为三部分
第一部分
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
}