最近工作中要实现表单元素的动态增加，并使用bootstrap的formValidation 插件对动态添加的表单元素进行前台校验。在以前的工作中也使用过bootstrapformValidation 对表单元素进行校验，但涉及到的表单元素都是固定的，所以在页面载入时，对表单元素进行初始化就可以实现。但这次使用bootstrapformValidation 对表单元素的动态添加验证方式，在这个问题上还是浪费了很多时间，也查阅了网上不少资料，官方API，各种博主的文档，总结下，以供以后遇到此难题的朋友查阅。
3）在说一下我自己的项目：
后台使用的是python，
先看一下后台返回的数据：
html = ''
for press in press_list:
html += u'<input type="radio" name="test_name" value="test_value" title="test_title" >'
return html前端写入数据：（样式使用的layui，JS使用的jquery）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script src="static/js/jquery.form.js"></script>
</head>
<body>
<form class="layui-form" id="form1" onkeydown="if(event.keyCode==13)return false;">
<div class="layui-form-item">
<label class="layui-form-label">测试input标签</label>
<div class="layui-input-block" >
<div id="test"></div>
<div class="layui-form-mid layui-word-aux ">
<i class="fa fa-bg fa-spinner fa-pulse" style="font-size: 20px;color: #1e9fff;display: none;"></i>
</div>
</div>
</div>
</form>
</body>
<script>
$.post(url,postdata,function (data) {
var result = JSON.parse(data);
if(result){
$("#test").html(result.html); // 接收后端返回数据
// 下面是给动态添加的元素进行验证
$('#form1').formValidation('addField', 'press',{
validators: {
notEmpty: {
message: '未选择出版社'
}
}
});
}
});
// 调用formValidation验证表单 ，对固定的html元素进行验证
function init_validator() {
$("#form1").formValidation({
excluded: [], // 只有禁用的表单不验证，取消隐藏不验证（tagsinput插件会隐藏原表单）
row: {
selector: '.layui-input-block,.layui-input-inline '
},
fields: {
name: {
validators: {
notEmpty: {
message: '姓名不能为空'
},
regexp: {
message: '姓名必须为中文',
regexp: /^[\u4e00-\u9fa5]+$/
},
stringLength: {
message: '姓名不能超过6个字',
max: 6
}
},
},
phone: {
validators: {
notEmpty: {
message: '手机号不能为空'
},
regexp: {
message: '不是有效的手机号',
regexp: /^\d{11}$/
}
}
},
username: {
validators: {
notEmpty: {
message: '请先生成账号'
},
regexp: {
message: '不是有效账号',
regexp: /^\d{11}\w*$/
}
}
},
password: {
validators: {
notEmpty: {
message: '密码不能为空'
},
regexp: {
message: '密码必须是数字和字母组合，且至少8位',
regexp: /^(?=.*?[a-zA-Z])(?=.*?[0-9])[a-zA-Z0-9]{8,}$/
}
}
},
repassword: {
validators: {
notEmpty: {
message: '密码不能为空'
},
identical: {
field: 'password',
message: '两次输入密码不一致'
}
}
},
source: {
validators: {
notEmpty: {
message: '未选择招生来源'
}
}
},
project: {
validators: {
notEmpty: {
message: '未选择科目'
}
}
},
press: {
validators: {
notEmpty: {
message: '未选择出版社'
}
},
},
book: {
validators: {
notEmpty: {
message: '未选择教材'
}
}
},
cls: {
validators: {
notEmpty: {
message: '未选择班级'
}
}
},
start_date: {
validators: {
notEmpty: {
message: '开始时间不能为空'
},
date: {
message: '不是有效日期（例：2017-01-01）',
format: 'YYYY-MM-DD'
}
}
},
end_date: {
validators: {
notEmpty: {
message: '结束时间不能为空'
},
date: {
message: '不是有效日期（例：2017-01-01）',
format: 'YYYY-MM-DD'
},
callback: {
callback: function (value, validator, $field) {
var time_limit = $('input:radio[name="book"]:checked').data("time_limit");
start_date = new Date($("#start_date").val()),
end_date = new Date($("#end_date").val());
if (time_limit && start_date) {
start_date.setMonth(start_date.getMonth() + time_limit)
if (end_date > start_date) {
return {valid: false, message: "设置课程时间不能大于当前选择教材的课程时间" + time_limit + "个月"}
} else {
return true
}
}
return true
}
}
}
},
lesson_num: {
validators: {
notEmpty: {
message: '总课时数不能为空'
},
regexp: {
message: '请输入有效课时数',
regexp: /^\d{1,3}$/
}
}
},
}
}).on('err.validator.fv', function (e, data) {
// $(e.target) --> The field element
// data.fv --> The FormValidation instance
// data.field --> The field name
// data.element --> The field element
// data.validator --> The current validator name
data.element
.data('fv.messages')
// Hide all the messages
.find('.help-block[data-fv-for="' + data.field + '"]').hide()
// Show only message associated with current validator
.filter('[data-fv-validator="' + data.validator + '"]').show();
});
}
</script>
</html>总结：
addField(field,options)
addField方法的参数
field就是要动态添加校验规则表单元素的name，即例子中的 pushMenu['+(n-1)+'].text
options实际就是校验规则 即例子中的{
validators: {
notEmpty: {
message: '推送业务内容不能为空'
}
}