Vue结合ElementUI如何自定义表单校验避免常见坑点？

本文共计1205个文字，预计阅读时间需要5分钟。

目录前言非空校验自定义校验定义自定义校验函数使用自定义校验函数总结前言在使用ElementUI的表格元素时，除了做一些简单的非空校验，在一些特殊的场合，还需要我们自定义校验函数。非空校验自定义校验定义自定义校验函数使用自定义校验函数总结

目录

• 前言
• 非空校验
• 自定义校验
• 定义自定义校验函数
• 使用自定义校验函数
• 总结

前言

在使用ElementUI的表单元素时候，除了做一些简单的非空处理校验，在一些特殊的场合，还需要我们做一些自定义校验。

其实ElementUI不仅提供了基本的非空校验，也对我们提供了自定义检验。

在使用的时候还是遇到了一些坑，下面简单的总结分享下

非空校验

知道自定义校验之前，需要知道基本的非空校验

如下图，ElementUI已经帮助我们创建好了一个简单的demo，我们直接拿来用即可。

这里我也是直接复制的demo，然后根据自己需求进行修改。

简单的说下相关的一些地方吧

一个表单包含着很多页面元素，根据自己的需求使用不同的组件去拼接即可：

表单的元素我们可以直接在data生成一个表单数据，把里面的属性都放在数据里面，这样可以直接把这个表单传到后台进行交互。