javascript实现常用的表单前台数据的校验


//一个工具的类，用来校验表单中一些常用的表单元素
var errMsg = {
/*
requied:{
//校验必填字段
msg: "this filed is required!",
test: function(obj,load){
return obj.value.length>0||load||object.value==object.defaultValue;

}
}, */
username:{
msg:"Not a valid username,it must be larger 5!",
test:function(obj){
return obj.value.length>5;
}
},
password:{
msg:"Not a valid password!Must be larger 5",
test:function(obj){
return obj.value.length>5;
}
},
email:{
msg:"Not a valid emial address!",
//校验电子邮件的格式
test:function(obj){
return !obj.value||/^[z-z0-9A-Z_+.-]+\@([a-z0-9-]+\.)+[a-z0=9]{2-4}$/i.test(obj.value);
}
},

//确保字段内容符合MM/DD/YYYY的格式
date:{
msg:"Not a valid date!",
test:function(obj){
return !obj.value||/^\d{2}\/\d{2}\/\d{2,4}$/.test(obj.value);
}
},

//确保字段内容是电话号码并将其自动格式化
phone:{
msg:"Not a valid phone number!",
test:function(obj){
//判断是否符合电话号码的要求
var m = /(\d{3}).*(\d{3}).*(\d{4})/.exec(obj.value);
//检查是否符合自己约定的格式 (123) 456-7890
if(m) {
obj.value="("+m[1]+")"+m[2]+"-"+m[3];
return !obj.value||m;
}
}
},


//确保字段内容是一个正确的URL
url: {
msg:"Not a valid URL!",
test:function(obj){
//确保有文本输入，而且不是默认的http://文本
/^https?:\/\/([a-z0-9-]+\.)+[a-z0-9]{2,4}.*$/.test(obj.value);
}
}

};
/**
* @param form - 表单元素的一个引用
* @param load - 是一个bool值，确定是否在页面加载时执行还是动态执行
*/
function validateForm(form,load){
var valid = true;
// alert(form.elements[0]);

// for(var i = 0;i<form.elements.length;i++){
// alert(form.elements[i].id+"-"+form.elements[i].className);
// }
for(var i = 0;i<form.elements.length;i++){

//先隐藏任何错误信息
hideErrors(form.elements[i]);
//检查字段是否包含正确的内容
alert(form.elements[i].id+"-"+form.elements[i].className);
if(!validateField(form.elements[i],load))
{
valid = false;
alert(valid);

}
}
//如果字段是不正确的内容返回false，否则返回true
return valid;
}

/**
  * 验证单个表单字段的内容
  */
function validateField(element,load){
//定义个数组用来存储错误信息
var errors = [];
//遍历所有可能的验证技术
var name = element.id;
alert(name);

//去掉前后的空格
//检查元素是否带有该class并把它传给验证函数
//var re = new RegExp("(^|\\s")+name+"(\\s|$)";
//if(re.test(element.className)&&!errMsg[name].test(element))
if(!errMsg[name].test(element))
{
//没有验证通过就把错误消息加入数组中
errors.push(errMsg[name].msg);
}
//有错误消息就显示
if(errors.length){
showErrors(element,errors);
}
else{
hideErrors(element);
}
//如果字段到最后没有得到验证就返货false
return  errors.length>0;


}


完整的例子可以参考下面的附件