jQuery.validate 表单动态验证
作者：互联网
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" ο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源码
————————————————
版权声明：本文为CSDN博主「aa1bb1cc2」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/aa1bb1cc2/article/details/80724971
标签：jQuery,nameValue,required,oTd,表单,var,validate,true,id 来源： https://www.cnblogs.com/webSnow/p/16354474.html