formValidation验证富文本编辑器的内容

更新

20220518今天测试了一下哈，发现该方法无效。。。

它要你手动输入隐藏的表单，它才会更新状态…

既然是隐藏域你输入不了，，所以该方法没有用。。

方法就是表单验证别的字段都验证成功后，你再 取一下 富文本内容

然后判断内容是否为空

原理

把需要验证的内容放在一个隐藏域或者把表单通过css隐藏

比如content字段是富文本的内容，然后通过富文本编辑器的一些辅助api来动态更新隐藏表单的value值，同时重新调用formValidation的验证某个字段的方法。

表单部分参考

这里是通过style="display: none"方式来隐藏一个表单

 <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" style="display: none">
                        <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",

        //false：其它规则验证通过后再进行远程验证   true：输入后立马验证 ，放这里控制全体
        verbose: false,
        // live:true,

        // 失去焦点验证
        // trigger: "blur",
        //验证字段
        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', Swal.resumeTimer)
                                }
                            })

                            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');