什么是表单验证？

表单验证通常往往用于一些信息填写完成以后, 前端提交到服务器之前的一个自检过程，比如：用户输入的手机号是都正确？用户输入的邮箱是否正确？此项信息是否是必填？

在提交到服务器之前去拦截信息的正确性。正确则提交服务器，错误则弹出警告提示！

基础的表单校验 (Element-UI form)：
email : 校验邮箱格式
maxlength：最大输入长度
minlength：最小输入长度

为什么要自定义 form 表单验证？

当使用 form 表单时，基础的一些验证满足不了我们项目中的需求时，这时候我们就需要去自定义验证规则。

如何自定义 form 表单验证？

现在我们来定义一个在项目中使用过的表单验证，来校验我们输入的富文本内容是否为空，包括空格，

html 部分：

1.首先我们要在 form 表单元素上绑定 rules 和 model 这两个属性，rules 代表你的自定义表单验证规则，model 代表你需要验证的数据。

<el-form label-position="right"
:rules="rules"
size="small"
ref="formRef"
:model="form">

2.在表单里绑定的值一定是 model 绑定的数据里的某个值，我们需要验证哪个字段，就在哪个 el-form-item 标签上绑定 prop 属性，值为你自定义规则里对应的值 (自定义规则的值名称应和你 model 绑定的数据里的值的名称对应）

<el-form-item prop="content">
<Editor v-if="isnextTick"
:content="content"
:editorRef="editor2"
@user1="(e) => keydownup(e)"
@user2="onChangeEdito">
</Editor>
</el-form-item>

定义 rules 部分：

const rules = reactive({
      content: [{ required: true, validator: checkSpace, trigger: "blur" }]
    });

自定义的规则无论校验是否通过，都必须执行 callback（）回调函数

const checkSpace = (rule, value, callback) => {
      if (!value.trim()) {
        callback(new Error("发布评论不能为空"));
      } else {
        callback();
      }
    };

定义需要校验规则如下

const checkVal = (str) => {
      let num = 0;
      const reg = /<p>(&nbsp;|&nbsp;\s+)+<\/p>|<p>(<br\/>)+<\/p>/g;
      while (num < str.length && str !== "") {
        num++;
        const k = str.match(reg);
        if (k) {
          str = str.replace(k[0], "");
        }
      }
      return str === "";
    };

form 表单校验根据自己的需求不同，可以自己定义校验规则，从而更灵活的满足需求。