本文介绍如何使用jQuery.validate插件进行动态表单验证，包括动态添加表单元素及验证规则，确保每次添加新行时都能实时更新验证逻辑。
实际上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" onclick="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源码
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
