jQuery.validate 表单动态验证

原创已于 2022-05-16 10:47:35 修改 · 454 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript #前端

于 2018-06-18 21:17:08 首次发布

本文介绍如何使用jQuery.validate插件进行动态表单验证，包括动态添加表单元素及验证规则，确保每次添加新行时都能实时更新验证逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实际上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源码