Element-ui表单验证

RanRanRan.

已于 2022-07-04 13:55:16 修改

阅读量1.5k

点赞数 3

分类专栏： ElementUI 文章标签： elementui

于 2022-07-04 13:54:17 首次发布

本文链接：https://blog.youkuaiyun.com/m0_58550256/article/details/125598609

版权

本文详述了Element-ui的Form表单验证规则，包括普通输入、数字类型及复杂场景如嵌套验证和图片上传的验证方法。通过实例解析，帮助开发者掌握各种验证技巧，避免常见陷阱。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

element-ui Form表单验证规则全解

element的form表单非常好用,自带了验证规则,用起来很方便,官网给的案例对于一些普通场景完全没问题,不过一些复杂场景的验证还得自己多看文档摸索,自己经过数次爬坑

之后,总结了几种form表单的验证规则,为了便于阅读,验证规则是拆分的

1. 普通输入验证

<el-form-item label="活动名称" prop="name">
    <!-- validate-event属性的作用是: 输入时不触发表单验证.提交时再验证,你也可以设置成动态验证 -->
    <el-input v-model="registData.name" :validate-event="false"></el-input>
  </el-form-item>
 
  rules: { // 表单验证规则
    name: [
      { required: true, message: '请输入活动名称' }, // 'blur'是鼠标失去焦点的时候会触发验证
      { min: 3, max: 5, message: '长度在 3 到 5 个字符' }
    ]
  }

2. 数字类型验证