elemeng-ui 中el-form 表单如何校验

最新推荐文章于 2024-07-08 15:30:38 发布

MyEee~~

最新推荐文章于 2024-07-08 15:30:38 发布

阅读量504

点赞数

CC 4.0 BY-SA版权

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_57748957/article/details/117674042

本文介绍了如何在element-ui的el-form组件中进行表单验证，包括官方文档中的rules设置，详细解释了trigger、message、type等属性的用法，并对比了在js代码中和行内式的验证方法，建议在验证规则复杂时采用js代码方式。

我们在使用element-ui中的form表单做一些简单校验时
先看官方文档
在这里插入图片描述
api自带的rules就是验证的规则
有两种方法
一种是写在js代码中

trigger代表在什么时候触发验证
message代表出发验证时提示内容
type代表验证的格式例如 “string” “number” “eamil”…之类
min: 3, max: 5 代表最小长度和最大长度
required代表是否开始判空验证

  rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          ],
          resource: [
            { required: true, message: '请选择活动资源', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ]
        }

然后在 el-form 中绑定rules 属性写上刚才创建的验证数组

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"></el-from>

注意在每个对应的el-form-item 绑定上prop
名字要对应上数组里的每一个键名称

<el-form-item label="活动名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>

另一种方法就是写在行内式
代表意义都一样就是换了个地方写
如果验证多的话写在行内会看起来比较头疼，建议写在js中

  <el-form-item
    prop="email"
    label="邮箱"
    :rules="[
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]"
  >
    <el-input v-model="dynamicValidateForm.email"></el-input>