vue表单验证富文本字数少于100就题型用户’

可以使用Vue.js的自定义指令和富文本编辑器的API来实现表单验证。首先，在Vue.js中定义一个自定义指令，如下所示：

Vue.directive('richTextCount', {
  inserted: function (el, binding) {
    const editor = binding.value
    const minCount = binding.arg || 100
    editor.on('text-change', function () {
      const text = editor.getText()
      const count = text.length - editor.getText('code-block').length
      if (count < minCount) {
        el.setCustomValidity('富文本内容不能少于' + minCount + '个字')
      } else {
        el.setCustomValidity('')
      }
    })
  }
})

然后，在表单中使用该指令和富文本编辑器API：

<template>
  <form>
    <div>
      <label>富文本内容：</label>
      <div>
        <div id="editor"></div>
        <textarea id="richText" v-rich-text-count="editor" :min-count="100"></textarea>
      </div>
    </div>
    <button type="submit">提交</button>
  </form>
</template>

<script>
import Quill from 'quill'
import 'quill/dist/quill.snow.css'

export default {
  mounted () {
    const editor = new Quill('#editor', {
      modules: {
        toolbar: [
          [{ 'header': [1, 2, false] }],
          ['bold', 'italic', 'underline'],
          [{ 'color': [] }, { 'background': [] }],
          [{ 'align': [] }],
          ['link', 'image'],
          ['clean']
        ]
      },
      theme: 'snow'
    })
    editor.on('text-change', function () {
      const text = editor.getText()
      const count = text.length - editor.getText('code-block').length
      document.querySelector('#richText').value = text
    })
  }
}
</script>

这样，当富文本编辑器中的字数少于100个时，提交按钮将被禁用，并显示一个错误消息。如果字数等于或多于100个，则提交按钮将启用。