问题：

记录在使用vue-quill-editor验证不能为空和输入空格时的验证问题。

思路：

1、在quill-editor上加change事件，事件触发时传递当前字段，验证当前字段内容；
2、验证正则（关键）

vue代码：

<template>
<div>
   <Form
          ref="ruleForm"
          :model="ruleForm"
          :rules="ruleValidate"
          :label-width="150"
        >
		  <FormItem label="名称" prop="name">
		        <quill-editor
		        v-model="ruleForm.name"
		        @change="changeQuillEditor('name')"
		        class="editor"
		        :options="editorOption"
		      ></quill-editor>
		   </FormItem>
  </Form>
</div>

</template>

<script>
export default {
	data(){
     let validates = (rule, value, callback) => {
     // reg是用于解析富文本标签里的内容，
     const reg =/(?!<(img|video).*?>)<.*?>/g
   		// strings 是解析出来的内容，不包含标签
      const strings = value.replace(reg,'')
      // value是空，callback触发不能为空
      if (value === "") {
        callback(new Error("内容不能为空"));
        // 如果解析出来的内容是空或全部是空格，callback触发不能为空
      } else if (strings.match(/^[ ]*$/)) {
        callback(
          new Error("内容不能为空")
        );
      } else {
        callback();
      }
    };
	  return {
		ruleForm:{
			name: ''
		},
		ruleValidate:{
		    name: [{ required: true, validator: validates,   trigger: "blur" }],
		},
		// 富文本配置项
		 editorOption: {
		 // placeholder设置提示词
		 placeholder: "请输入内容...",
		 // modules设置工具栏
		 modules: {
		   toolbar: [
		     ["bold", "italic", "underline", "strike"],
		     ["link", "image", "video"],
		     [{ list: "ordered" }, { list: "bullet" }],
		     [{ size: ["12", "16", "18", "20", "24", "28", "32", "36"] }], // 字体大小
		     [{ header: [1, 2, 3, 4, 5, 6, false] }],
		     [{ color: [] }, { background: [] }],
		     [
		       {
		         font: [
		           false,
		           "heiti",
		           "songti",
		           "kaiti",
		           "lishu",
		           "arial",
		           "monospace",
		         ],
		       },
		     ][{ align: [] }], // 字体 false默认微软雅黑，其他可删减
		   ],
		 },
		},
	}
	}
}

  methods: {
  	// change事件，验证表单内容，val是当前需要验证的字段名
    changeQuillEditor(val){
        this.$refs['ruleForm'].validateField(val);
    },
}
</script>