使用elemeng-ui 中el-form 表单校验的三种方式

最新推荐文章于 2024-04-12 16:19:47 发布

VIP文章迪邦尼

最新推荐文章于 2024-04-12 16:19:47 发布

阅读量3.5k

点赞数 1

文章标签： vue javascript

本文链接：https://blog.csdn.net/Zgtby/article/details/117694919

版权

先下载element-ui

cnpm install element-ui -S

完整引入和按需引入在Element-UI官方文档都有详细操作步骤⇥element-ui官方文档

这种方式适用于表单全部字段校验或需要校验字段类型比较简单的数据类型

做法：需要在el-form-item标签中加入 :rules=’'rules ‘’ ，然后在data()中写入rule{添加每个表单的验证}

在data中写入以下代码：
在这里插入图片描述
其中对于有些需要自定义的校验规则可以作为变量写在data中：

在这里插入图片描述

这种方式适用于需要个别检验的字段，或者表单字段有变动的校验。

实际操作：需要在el-form-item标签中加入 :rules=’'验证的条件 ‘’

在这里插入图片描述

在这里插入图片描述
除了在 Form 组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则
这里的rule、prop直接写就对应不上表单mode绑定的对象上的属性，所以在此要用循环的方式找到要校验的字段所在数据中的索引，然后再以字符串拼接的方式连上校验字段名称

<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
  <el-form-item
    prop

关注