最近在公司的项目中,对目前用到的form表单校验整合的验证(框架?)

最近,自己写了一个基于jquery的类似js验证框架,目前不支持radio和checkbox的校验(需要通过name来界定,而我这里都是根据节点的id),请朋友指正
不懂详细如何描述,直接上内容吧:
先说下html代码
<tr>
<td align="right" class="f_14px">电话号码</td>
<td><input name="user.mobileTelephone" id="[color=red]telephone[/color]" type="text" class="gm_input_e"/><em class="btx_dian">*</em></td>
<td><em id="[color=red]telephone_error[/color]" 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;
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值