自定义form表单验证

霍格沃兹测试开发学社 公众号
1

什么是表单验证？

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

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

基础的表单校验(Element-UI form)：

**email **: 校验邮箱格式

maxlength：最大输入长度

minlength：最小输入长度

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

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

如何自定义form表单验证？

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

Html部分

01

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


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

定义Rules部分

02

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


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


const checkVal = (str) => {
      let num = 0;
      const reg = /<p>( | \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表单校验根据自己的需求不同，可以自己定义校验规则，从而更灵活的满足需求。