FV = {
errMsg: {
//检查特定字段是否为必填
required: {
msg: "该字段为必填项.",
test: function(obj, load) {
//确保字段尚未有内容输入,并在页面加载时不作检查
return obj.value.length > 0 || load;
}
},
//确保字段内容是正确的email地址
email: {
msg: "Email地址格式不正确.",
test: function(obj) {
//确保有内容的输入并符合email地址的格式
return !obj.value || /^[a-z0-9_+.-]+@([a-z0-9-]+\.)+[a-z0-9]{2,4}$/i.test(obj.value);
}
},
//确保字段内容符合MM/DD/YYYY的时间格式
date: {
msg: "日期格式不正确",
test: function(obj) {
//确保输入了内容并检查是否符合MM/DD/YYYY的时间格式
return !obj.value || /^\d{2}\/\d{2}\/\d{2,4}$/.test(obj.value);
}
},
//确保字段内容是一个正确的URL
url: {
msg: "URL格式不正确",
test: function(obj) {
//确保有文本的键入,而且不是默认的http://文本
return !obj.value || obj.value == 'http://' ||
//确保它是一个正确的URL
/^https?:\/\/([a-z0-9-]+\.)+[a-z0-9]{2,4}.*$/.test(obj.value);
}
},
//确保字段内容是一个整数
integer: {
msg: "请输入整数",
test: function(obj){
//确保有文本的键入且符合整数格式
return !obj.value || /^\d+$/.test(obj.value);
}
}
},
markRequiredFiled: function() {
$("input.required").prev("label").addClass("required");
},
//验证表单所有字段的函数
//form参数应是一个表单元素的引用
//load参数应该是一个布尔值,用以判别验证函数在页面加载时执行还是动态执行
validateForm: function(form, load) {
var valid = true;
//遍历表单的所有字段元素
//form.elements是表单所有字段的一个数组
for (var i = 0, len = form.elements.length; i < len; i++) {
//先隐藏任何错误信息,以防不意的显示
FV.hideErrors(form.elements[i]);
//检查字段是否包含正确的内容
if (FV.validateField(form.elements[i], load)) {
valid = false;
}
}
//如果字段是不正确的内容返回false,反之返回true
return valid;
},
//验证单个字段的内容
validateField: function(element, load) {
var errors = [];
//遍历所有可能的验证技术
for (var name in FV.errMsg) {
//查看字段是否有错误类型指定的class
var re = new RegExp("(^|\\s)" + name + "(\\s|$)");
//检查元素是否带有该class并把它传递给验证函数
if (re.test(element.className) && !FV.errMsg[name].test(element, load)) {
//如果没有通过验证,把错误信息增加到列表中
errors.push(FV.errMsg[name].msg);
}
}
//如果存在错误信息,则显示出来
if (errors.length) {
FV.showErrors(element, errors);
}
//如果字段始终没有得到验证,返回false
return errors.length > 0;
},
//隐藏当前正显示的任何错误信息
hideErrors: function(element) {
//获取当前字段的下一个元素
var next = element.nextSibling;
//如果下一个元素是ul并有class为errors
if (next && next.nodeName == "UL" && next.className == "errors") {
//删掉它(这是我们“隐藏”的含义)
element.parentNode.removeChild(next);
}
},
//显示表单内特定字段的错误信息
showErrors: function(element, errors) {
//获取当前字段的下一个元素
var next = element.nextSibling;
//如果该字段不是我们指定的包含错误的容器
if (next && (next.nodeName != "UL" || next.className != "errors")) {
next = document.createElement("ul");
next.className = "errors";
//并在DOM中把它插入到恰当的地方
element.parentNode.insertBefore(next, element.nextSibling);
}
//现在有了一个包含错误的容器引用,我们可以遍历所有的错误信息了
for (var i = 0; i < errors.length; i++) {
//为每一条错误信息创建新的li包裹器
var li = document.createElement("li");
li.innerHTML = errors[i];
//并插入到dom中
next.appendChild(li);
}
},
watchFields: function(form) {
//遍历表单内的所有字段
for (var i = 0; i < form.elements.length; i++) {
sw.e.addHandler(form.elements[i], 'change', function(event) {
//一旦失去焦点,重验证该字段
returnFV.validateField(this, false);
});
}
}
};
使用方法:
<form>
<input type='text' class='required'></input>
<input type='text' class='integer'></input>
<form>
var temp = FV.validateForm($('form')[0],false);
如果有不通过验证的字段,则返回temp = fasle;
如果通过,则temp = true;
validateForm 第二个参数表示是否要在页面初始化时进行验证,true为是,false为否。
可以在代码中扩展自己所需要的验证类型,写入errMsg中。