js的一个前台验证框架
validatorForm.js
/**
这个errMsg对象是这个js验证的主体，是定义的验证的规范
**/
var errMsg = {
// 检查特定字段是否为必填
required : {
msg : "->字段不能为空哦！",
test : function(obj, load) {
// 确保字段尚未有内容输入，并在页面加载时不做检查(在加载时显示"必填字段"可能会让用户感到厌烦
// return
// obj.value.length>0||load||obj.value==obj.defaultValue;//我似乎觉得defaultValue这个值似乎没有什么意义，所以在这里去掉(caoyong)
return obj.value.length > 0;
}
},
// 确保字段内容是正确的email地址
email : {
msg : "->字段不是一个电子邮件地址哦！",
test : function(obj) {
// 确保输入并符合email地址的格式
return !obj.value
|| /^[a-z0-9_+.-]+\@([a-z0-9-]+\.)+[a-z0-9]{2,4}$/i
.test(obj.value);
}
},
// 确保字段内容是电话号码并将其自动格式化
phone : {
msg : "->字段不是一个电话号码！",
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;
}
},
handPhone : {
msg : "->不是一个有效的手机号！",
test : function(obj) {
// 确保他是否符合电话号码要求
var m = /[0-9]{1,11}/.exec(obj.value);
// 如果是，可能也只是表面正确而已-强行检查它的格式是否符合我们的要求;(123)456-7890
return !obj.value || m;
}
},
isIP : {
msg : "->不是一个有效的ip哦！",
test : function(obj) {
// 确保他是否符合电话号码要求
var m = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/g.exec(obj.value);
// 如果是，可能也只是表面正确而已-强行检查它的格式是否符合我们的要求;(123)456-7890
return !obj.value || m;
}
},
isNumber : {
msg : "->不是一个数字哦！",
test : function(obj) {
// 确保他是否符合电话号码要求
var m = /^\d+(\.\d*)?$/.exec(obj.value);
// 如果是，可能也只是表面正确而已-强行检查它的格式是否符合我们的要求;(123)456-7890
return !obj.value || m;
}
},
isInt : {
msg : "->不是一个整数哦！",
test : function(obj) {
// 确保他是否符合电话号码要求
var m = /^\d+$/.exec(obj.value);
// 如果是，可能也只是表面正确而已-强行检查它的格式是否符合我们的要求;(123)456-7890
return !obj.value || m;
}
},
isHaoduan : {
msg : "->不是一个号段，号段由7位或者11位的数字组成！",
test : function(obj) {
// 确保他是否符合电话号码要求
var m = /^\d[7]|\d[11]$/.exec(obj.value);
// 如果是，可能也只是表面正确而已-强行检查它的格式是否符合我们的要求;(123)456-7890
return !obj.value || m;
}
},
// 确保字段内容符合MM/DD/YYYY的时间格式
date : {
msg : "->不是一个有效的日期！",
test : function(obj) {
return !obj.value || /^\d{2,4}\/\d{2}\/\d{2}$/.test(obj.value)
|| /^\d{2,4}-\d{2}-\d{2}$/.test(obj.value)
|| /^\d{2,4}-\d{2}-\d{2}\s\d{1,2}:\d{1,2}:\d{1,2}$/.test(obj.value);
}
},
// 确保字段内容是一个正确的URL
url : {
msg : "->不是一个有效的URL地址哦!",
test : function(obj) {
// 确保有文本输入，而且不是默认的http://文本
return !obj.value
|| obj.value == 'http://'
|| /^https?:\/\/([a-z0-9-]+\.)+[a-z0-9]{2,4}.*$/
.test(obj.value);
}
},
// 确保字段内容是一个正确的密码
isPassWord : {
msg : "->密码应该以字母开头，可以是字母、数字!@#$%^&*中的任意的6-16个字符！，",
test : function(obj) {
// 确保有文本输入，而且不是默认的http://文本
return !obj.value
|| /^[a-zA-Z]{1}[a-zA-Z0-9!@#$%^&*]{5,16}$/.test(obj.value);
}
}
}
// 显示表单内特定字段的错误信息
function showErrors(divName, errors) {
document.getElementById(divName).innerHTML = "" + errors
+ "";
}
/**
*validatorJson是前台写的具体限定输入的json
*errorDIV将错误信息在id为errorDIV的div上面显示出来
**/
function validElems(validatorJson, errorDIV) {
var flag = true;
for ( var i = 0; i < validatorJson.length; i++) {
var elem = validatorJson[i];
var validObj = elem['valide'];
if (validObj && validObj.length == 0) {
continue;
}
var item = document.getElementById(elem.id);
for ( var j = 0; j < validObj.length; j++) {
var validValue = validObj[j];
flag = errMsg[validValue].test(item);
if (!flag) {
showErrors(errorDIV, elem.name + errMsg[validValue].msg);
item.focus();
return flag;
}
}
}
return flag;
}
引用实例（一个jsp）：
<%@ page language="java" pageEncoding="UTF-8"
contentType="text/html; charset=UTF-8"%>
alt="XXXXX系统" />