富文本编辑器实现表单非空校验

首先尝试使用form的rules规则去验证，发现未生效；

  <el-form ref="form" :disabled="readonly" :model="form" :rules="rules" label-width="120px">

    <el-form-item label="内容" prop="content">
      <editor v-model="form.content" :readOnly="readonly" :min-height="192"/>
     </el-form-item>
 </el-form>



form: {},
// 表单校验
rules: {
    content: [{required: true, message: "内容不能为空", trigger: ['blur', 'change']}]
}


scope.$refs["form"].validate(valid => {
          if (valid) {}
})

通过打印值发现form.content的默认值是‘

<p><br></p>

然后通过判断属性值来实现类似表单验证的效果，后面加一个span

      <el-form-item label="内容" prop="content">
        <editor v-model="form.content" :readOnly="readonly" :min-height="192"/>
        <span v-if="form.content&&form.content==='<p><br></p>'" style="font-size: 12px;color: #f67272">内容不能为空</span>
      </el-form-item>

并且提交时通过表单验证后再单独验证form.content

 scope.$refs["form"].validate(valid => {
          if (valid) {
            const flag = scope.form.content ==='<p><br></p>'
            if(flag) return
}
})

’