实际上jQuery.validate提供了动态校验的方法。而动态拼JSON串的方式是不支持动态校验的。牺牲jQuery.validate的性能优化可以实现(jQuery.validate的性能优化见图1.2 jQuery.validate源码
)。
也可以选择使用jQuery.validate提供的动态校验方法。
图1.1 需要校验的HTML页面
js文件内容如下:
var
oTab = document.getElementById(
'addAppDetailTab'
);
//获取表格的行数
var
id = oTab !=
null
? oTab.tBodies[0].rows.length : 0;
$(
function
() {
//点击添加,为表格追加一行
$(
'#addAppDetailBtn'
).click(
function
() {
var
oTr = document.createElement(
'tr'
);
var
oTd = document.createElement(
'td'
);
oTd.appendChild(oTr);
oTab.appendChild(oTr);
createTD(oTab);
});
});
//为表格追加一行的方法
function
createTD(oTab) {
//var id = $('#addAppDetailTab').attr('tabTrIndex');
//id = id ? id : 1;
$(
'#addAppDetailTab'
).attr(
'tabTrIndex'
, id);
var
oTr = document.createElement(
'tr'
);
var
oTd = document.createElement(
'td'
);
oTd.innerHTML =
'<div class="td validation-box"><input class="form-control" style="width:70px" value="" id="appDetailVOList['
+ id +
'].version" name="appDetailVOList['
+ id +
'].version"></div>'
;
oTr.appendChild(oTd);
var
oTd = document.createElement(
'td'
);
oTd.innerHTML =
'<div class="td validation-box"><input class="form-control" style="width:120px" οnclick="WdatePicker({skin:\'mag\',dateFmt:\'yyyy-MM-dd HH:mm:ss\'})" value="" id="appDetailVOList['
+ id +
'].updateTime" name="appDetailVOList['
+ id +
'].updateTime"></div>'
;
oTr.appendChild(oTd);
var
oTd = document.createElement(
'td'
);
oTd.innerHTML =
'<div class="td validation-box"><input class="form-control wdate" style="width:50px" value="" name="appDetailVOList['
+ id +
'].appSize"><span>MB</span></div>'
;
oTr.appendChild(oTd);
var
oTd = document.createElement(
'td'
);
//添加beetl表达式
var
copy = $(
'#platformListDiv'
).clone();
copy.find(
".select-text"
).attr(
"id"
,
"appDetailVOList["
+ id +
"].platform"
);
copy.find(
".select-text"
).attr(
"name"
,
"appDetailVOList["
+ id +
"].platform"
);
copy.appendTo(oTd);
oTr.appendChild(oTd);
var
oTd = document.createElement(
'td'
);
oTd.innerHTML =
'<div class="td validation-box"><input class="form-control" style="width:200px" value="" name="appDetailVOList['
+ id +
'].url"></div>'
;
oTr.appendChild(oTd);
var
oTd = document.createElement(
'td'
);
oTd.innerHTML =
'<div class="td"><a href="javascript:;" id="deleteAppVersion_'
+ id +
'" name="deleteAppVersion_'
+ id +
'">删除</a></div>'
;
oTr.appendChild(oTd);
oTd.getElementsByTagName(
'a'
)[0].onclick =
function
() {
var
appNum = oTab !=
null
? oTab.tBodies[0].rows.length : 0;
var
id = $(
this
).attr(
'id'
);
var
trIndex = id.substring(id.indexOf(
'_'
) + 1, id.length);
$(
'#addAppDetailTab'
).attr(
'tabTrIndex'
, trIndex);
if
(appNum >= 2) {
oTab.tBodies[0].removeChild(
this
.parentNode.parentNode.parentNode);
}
else
{
$(
this
).parent().addClass(
'validation-box'
);
$(
this
).after(getValidShowErrorHtml(
"必须填写一行APP版本信息"
, $(
this
).attr(
'name'
)));
}
$(
'#addAppDetailBtn'
).show();
}
oTab.tBodies[0].appendChild(oTr);
id ++;
}
//保存表单信息的方法
function
save() {
doAppValidate(
'app_submit_form'
);
var
flag = $(
"#app_submit_form"
).valid();
if
(!flag){
return
;
}
var
dataArray = formArrayUtil($(
"#app_submit_form"
).serializeArray())[0];
console.log(dataArray);
}
/**
* 校验
* @param formid
*/
/**
* desc:特殊字符验证
*/
jQuery.validator.addMethod(
"specialCharValidate"
,
function
(value, element, param) {
var
pattern =
new
RegExp(
"[`~!@%#$^&*()=|{}':;', \\[\\]<>/? \\.;:%……+¥()【】‘”“'。,、?]"
);
return
this
.optional(element)||!pattern.test(value) ;
},
"请不要输入特殊字符"
);
jQuery.validator.addMethod(
"positiveNumValidate"
,
function
(value, element, param) {
var
strRegex =
"^[0-9]+(.[0-9]{2}|.[0-9])?$"
;
var
pattern =
new
RegExp(strRegex);
if
(value !=
""
) {
if
(!pattern.test(value)) {
return
false
;
}
}
return
true
;
},
"请输入正数(小数或整数)"
);
var
rules4Volidate = {
name : {
required :
true
,
maxlength : 24
},
icon : {
required :
true
,
maxlength : 100
},
desc : {
required :
true
,
maxlength : 100
},
author : {
required :
true
,
maxlength : 24
},
email : {
required :
true
,
email :
true
},
webUrl : {
maxlength : 100,
url :
true
},
reqdata : {
required :
true
},
jcaptchaCode : {
required :
true
}
};
var
messages4Volidate = {
name : {
required :
"请输入应用名称"
,
maxlength :
"名称长度不能超过24个字符"
},
icon : {
required :
"请选择应用图标"
,
},
desc : {
required :
"请输入应用描述"
,
maxlength :
"应用描述不能超过100个字符"
},
author : {
required :
"请填写开发者"
},
email: {
required :
"请填写开发者邮箱"
,
email :
"请输入正确的email地址"
},
webUrl : {
maxlength :
"下载链接不能超过100个字符"
,
url :
"请输入合法的URL"
},
reqdata : {
required :
"请填写所用数据"
},
jcaptchaCode : {
required :
"请填写验证码"
}
};
//动态改变rules4Volidate(JSON格式) 的值
function
getRules(formid) {
if
($(
"#"
+ formid).find(
"tr"
).length > 0) {
// 开始逐行验证
$(
"#"
+ formid).find(
"tr"
).each(
function
(index, tr) {
$(
this
).find(
"input"
).each(
function
() {
var
nameValue = $(
this
).attr('name');
var
idValue =
this
;
if
(nameValue.indexOf(
"].version"
) != -1) {
rules4Volidate[nameValue] = {required :
true
, maxlength : 12, positiveNumValidate :
true
};
messages4Volidate[nameValue] = {required :
"请正确填写APP版本"
, positiveNumValidate:
"请输入正数(小数或整数)"
};
}
else
if
(nameValue.indexOf(
"].updateTime"
) != -1) {
rules4Volidate[nameValue] = {required :
true
};
messages4Volidate[nameValue] = {required :
"请正确填写APP版本"
};
}
else
if
(nameValue.indexOf(
"].appSize"
) != -1) {
rules4Volidate[nameValue] = {required :
true
, maxlength : 6, positiveNumValidate:
true
};
messages4Volidate[nameValue] = {required :
"请正确填写APP大小"
, maxlength :
"APP大小长度不能超过6位"
, appSizeValidate:
"请输入正数(小数或整数)"
};
}
else
if
(nameValue.indexOf(
"].platform"
) != -1) {
rules4Volidate[nameValue] = {required :
true
};
messages4Volidate[nameValue] = {required :
"请正确填写APP运行平台"
};
}
else
if
(nameValue.indexOf(
"].url"
) != -1) {
rules4Volidate[nameValue] = {required :
true
, maxlength : 100, url :
true
};
messages4Volidate[nameValue] = {required :
"请正确填写APP下载地址"
, maxlength :
"APP下载地址长度不能超过6位"
, url :
"请输入合法的URL地址"
};
}
});
}
);
}
}
function
doAppValidate(formid){
//获取当前rules4Volidate 的值
getRules(formid);
/*删除jQuery.volidate上一次表单验证添加的validator数据,不删除的话第二次校验不生效。原因如下图代码*/
$("#" + formid).removeData("validator");//这个是动态拼串的方式生效的关键
$(
"#"
+ formid).validate({rules : rules4Volidate, messages: messages4Volidate, errorPlacement : validErrorFunction,
success : validSuccessFunction});
}
图1.2 jQuery.validate源码