0
点赞
收藏
分享

微信扫一扫

自定义form表单验证

什么是表单验证?

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

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

基础的表单校验(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表单校验根据自己的需求不同,可以自己定义校验规则,从而更灵活的满足需求。

举报

相关推荐

0 条评论