最近在公司的项目中，对目前用到的form表单校验整合的验证（框架？）

最近，自己写了一个基于jquery的类似js验证框架，目前不支持radio和checkbox的校验(需要通过name来界定，而我这里都是根据节点的id)，请朋友指正
不懂详细如何描述，直接上内容吧：
先说下html代码
          <tr>
            <td align="right" class="f_14px">电话号码</td>
            <td><input name="user.mobileTelephone" id="telephone" type="text" class="gm_input_e"/><em class="btx_dian">*</em></td>
            <td><em id="telephone_error" class="f_c_12px">输入11位数字号码</em></td>
          </tr>
其中的em标签中的id必需为input中的id+"_error"，否则需要修改框架中的规则。
同时，给form表单加上id，加入初始化事件和参数配置
<script type="text/javascript" >
var idArray = ["loginPwd", "password","confirmPwd"];
var regArray = [/^([A-Za-z]|[_]|[0-9]){6,12}$/,/^([A-Za-z]|[_]|[0-9]){6,12}$/,/^([A-Za-z]|[_]|[0-9]){6,12}$/];
var errorArray = ["不可为空且不超过6-12位字符", "不可为空且不超过6-12位字符", "不可为空且不超过6-12位字符"];
var baseinfoArray = ["输入6-12位字母或数字，区分大小写","输入6-12位字母或数字，区分大小写","输入6-12位字母或数字，区分大小写"];

$(document).ready(function() {
for (var i = 0; i < idArray.length; i++) {
$("#" + idArray[i]).blur(function() {
checkEle($(this).attr("id"), "c_red");
})
}
$("#regForm").submit(function() {
return checkForm($(this).attr("id"), "c_red");
})
});
</script>
配置至此完毕，上面的这些数组的定义，我在我的js文件中有详细的描述，大家帮忙指正。

不知道怎么发了附件看不到，我直接把代码贴上来吧

// // 对于框架的引用，需要用到下面的这些参数
// // 以下为必填
// /**
// * 所有要进行验证的元素的id
// */
// var idArray = ["loginPwd", "password", "confirmPwd"];
// /**
// * 对应的正则
// */
// var regArray = [/^([A-Za-z]|[_]|[0-9]){6,12}$/,
// /^([A-Za-z]|[_]|[0-9]){6,12}$/,
// /^([A-Za-z]|[_]|[0-9]){6,12}$/];
// /**
// * 错误信息
// */
// var errorArray = ["不可为空且不超过6-12位字符", "不可为空且不超过6-12位字符", "不可为空且不超过6-12位字符"];
// /**
// * 原始信息
// */
// var baseinfoArray = ["输入6-12位字母或数字，区分大小写", "输入6-12位字母或数字，区分大小写",
// "输入6-12位字母或数字，区分大小写"];
// // 以下为选配
// /**
// * 重复校验的元素集合，必须两个一组，即第1，2个为一组，否则会出现未知错误(可不配置)
// */
// var reCheckArray = ["password", "confirmPwd"];
// /**
// * 重复校验的错误信息(可不配置,必须与reCheckArray数组同时配置或不配置)
// */
// var reCheckInfoArray = ["两次输入的密码不一致"];
// /**
// * 校验中英文混合长度的数组，对应在正则的数组中必须可校验“*”，原理是将中文替换成2个“*”进行校验（可不配置）
// */
// var chineseOrOtherArray = ["title"];
// /**
// * form表单是否提交的参数
// */
// var submitFlag = "";
// /**
// * onload初始化事件(根据需要选配)
// */
// $(document).ready(function() {
// /**
// * 对form表单中的元素初始化onblur事件
// */
// for (var i = 0; i < idArray.length; i++) {
// $("#" + idArray[i]).blur(function() {
// checkEle($(this).attr("id"), "c_red");
// })
// }
// /**
// * 对form表中的提交初始化校验
// */
// $("#modifyPwdForm").submit(function() {
// return (checkForm($(this).attr("id"), "c_red"));
// })
// });
/**
* 默认的样式名
*/
var defaultClassName = "f_c_12px";
/**
* 检查每个字段
*
* @param {}
*            id 元素节点的id
* @param {}
*            className 错误的样式名
* @return {true为符合规则，false为不符合规则}
*/
function checkEle(id, className) {
var num = getNum(idArray, id);
var submitFlag = true;
if (num > -1) {
var value = $("#" + id).val();
var reg = regArray[num];
// 判断特殊的中英文长度校验的数组
try {
chineseOrOtherArray == null;
} catch (e) {
chineseOrOtherArray = [];
}
// 判断需要重复校验的元素数组，如密码重复校验，必须为2个一组的
try {
reCheckArray == null;
} catch (e) {
reCheckArray = [];
}
var chineseNum = getNum(chineseOrOtherArray, id);
// 中文的替换成2个字符
if (chineseNum > -1) {
value = value.replace(/[^\x00-\xff]/g, '**');
}
var flag = reg.test(value);
var errorinfo = "";
if (flag) {
var reCheckNum = getNum(reCheckArray, id);
// 如果为数组中的偶数项
if (reCheckNum > 0 && ((reCheckNum - 1) % 2) == 0) {
var lastValue = $("#" + idArray[num - 1]).val();
// 中文的替换成2个字符
value = $("#" + idArray[num]).val();
if (value != lastValue) {
$("#" + id + "_error")
.html(reCheckInfoArray[(reCheckNum - 1) / 2])
.removeClass().addClass(className);
submitFlag = false;
return submitFlag;
}
}
$("#" + id + "_error").html(baseinfoArray[num]).removeClass()
.addClass(defaultClassName);
} else {
$("#" + id + "_error").html(errorArray[num]).removeClass()
.addClass(className);
submitFlag = false;
}
}
return submitFlag;
}
/**
* 检查指定id的表单
*
* @param {}
*            id form表单的id
* @param {}
*            className 错误的样式名
* @return {true为符合规则，false为不符合规则}
*/
function checkForm(id, className) {
submitFlag = true;
$("#" + id).find("input, select, textarea").each(function() {
var eleId = $(this).attr("id");
if (!checkEle(eleId, className) && submitFlag) {
submitFlag = checkEle(eleId, className);
}
})
return submitFlag;
}

/**
* 判断数组中是否有该元素
*
* @param {}
*            array 数组
* @param {}
*            id 元素的id
* @return {true为存在，false为不存在}
*/
function getNum(array, id) {
var flag = -1;
for (var i = 0; i < array.length; i++) {
if (array[i] == id) {
flag = i;
break;
}
}
return flag;
}

评论

1 楼 wrong1111 2009-08-12  

虽说验证表单早已有现成的了。。但是为了LZ写的代码。。。赞一个！

表单验证也可以看看这个。。

http://wrong1111.iteye.com/blog/437150