formValidation验证富⽂本编辑器的内容
原理
把需要验证的内容放在⼀个隐藏域或者把表单通过css隐藏
⽐如content字段是富⽂本的内容，然后通过富⽂本编辑器的⼀些辅助api来动态更新隐藏表单的value值，同时重新调⽤formValidation的验证某个字段的⽅法。
表单部分参考
这⾥是通过⽅式来隐藏⼀个表单
<form class="form" method="post" action="{:url('/article')}">
<div class="form-group">
<label for="title">⽂章标题</label>
<textarea class="form-control" rows="3" name="title" id="title"></textarea>
</div>
<div class="form-group" >
<label for="content">⽂章内容</label>
<textarea class="form-control" rows="3" name="content" id="content"></textarea>
</div>
<div class="form-group">
<label for="type">⽂章类型</label>
<select class="form-control" name="type" id="type">
<option value="1">原创</option>
<option value="2">转载</option>
<option value="3">翻译</option>
</select>
</div>
<div class="form-group">
<label for="publish_type1">发布类型</label>
<div>
<label class="radio-inline">
<input type="radio" name="publish_type" id="publish_type1" value="1" checked>公开
</label>
<label class="radio-inline">
<input type="radio" name="publish_type" id="publish_type2" value="0">私密
</label>
</div>
</div>
<button type="submit" class="btn btn-default">发布</button>
</form>
js部分
主要就是通过callback来⾃定义验证逻辑
<script>
$(".form").formValidation({
//配置语⾔
locale: "zh_CN",
locale: "zh_CN",
//false：其它规则验证通过后再进⾏远程验证  true：输⼊后⽴马验证，放这⾥控制全体        verbose: false,
// live:true,
// 失去焦点验证
// trigger: "blur",
asp富文本编辑器//验证字段
fields: {
title: {
validators: {
notEmpty: true,
stringLength: {
max: 100,
}
}
},
content: {
excluded: false,
validators: {
// notEmpty: true,
callback: {
message: "内容必填",
callback: function(value, validator, $field){
const Toast = Swal.mixin({
toast: true,
width: 300,
position: 'top',
showConfirmButton: false,
timer: 1000,
timerProgressBar: true,
didOpen: (toast)=>{
toast.addEventListener('mouseenter', Swal.stopTimer)
toast.addEventListener('mouseleave', sumeTimer)
}
})
if(value ===''){
/
/此处可添加错误的提⽰
Toast.fire({
icon: 'error',
title: "⽂章内容为空"
})
return false;
}else{
//验证成功后可以把替换成正确的样式
return true;
}
}
}
}
},
type: {
validators: {
notEmpty: true,
}
},
publish_type: {
validators: {
notEmpty: true,
}
}
}
}
})
</script>
同步富⽂本编辑器的内容
然后要通过富⽂本编辑器的⼀些api来实时给隐藏的表单赋值，⽐如 UEditor 的 contentChange事件
//给隐藏的表单赋值
$("#content").val($.trim(value));
//重新调⽤formValidation验证特定的字段
$(".form").formValidation('revalidateField', 'content');

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。