前端el-from的学习

前端el-from的学习

element组件官网

<template>
  <el-form
    :model="ruleForm" //绑定ruleForm表单
    :rules="rules"    //绑定验证规则,通过rules属性传入约定的验证规则
    :class="className"  //绑定样式
    status-icon        //el-form自带的提示,是否在输入框中显示校验结果反馈图标
    ref="ruleForm"     //我们一开始就在 el-form 里写了 ref=”ruleForm”，我们在 methods 里就可以用this.$refs.ruleForm.validate((valid) => {}
  >
  

model是表单的数据对象,可以使用这个数据对象进行存储表单的数据,rules是验证规则,可以对表单的数据进行这样的定义

rules: {
  name: [
    { required: true, message: '请输入活动名称', trigger: 'blur' },
    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
  ],
  }

对于status-icon以以下的方式使用