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

我们在使用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>