Vue关于Element对表单的校验

一、如何使用

1、要在Vue文件的<script>中的data中声明rules对象

data() {
    return {
      // 用以使用v-modul与表单进行数据绑定
      form: {
        title: '',
        roleList: [], // 考试对象
        deadline: '', // 截止时间
      },
      // 数据校验规则
      rules: {
        roleList: [{
          required: true, // 规定是否必须填写
          message: '请选择考试对象', // 校验失败后的提示信息
          trigger: 'blur' // 失去焦点时进行数据校验
          //trigger: 'change' // 数据改变时进行数据校验
        }],
        deadline: [{
          required: true,
          message: '请选择截止时间',
          trigger: 'blur'
        }],
        title: [{
          required: true,
          message: '请输入试卷标题（1-20个字）',
          trigger: 'blur'
        }]
      }
    }
  },

2、对于<el-form>标签需要添加属性:rules="rules"

<el-form ref="form" :model="form" :rules="rules" class="form"></form>

3、对于<el-form-item>标签需要绑定属性prop，

注意：<el-form-item>中prop属性需要与data中的rules对象中的规则名称一致，也要和v-model中绑定的字段名一致，如果绑定名不一致会出现就算输入了数据也判定为空

<el-form-item prop="title">
    <el-input
        v-model="form.title"
        type="text"
        placeholder="请输入试卷标题（1-20个字）"
        maxlength="20"
        show-word-limit
    />
</el-form-item>

4、提交表单时需要手动开启数据校验

<el-button
  type="primary"
  class="submit"
  :loading="loading"
  style="margin-top: 20px"
  @click="submit"
>
  提交试卷
</el-button>

submit() {
  this.$refs['form'].validate(res => {
    // 若数据校验成功返回true，否则返回false
  })
}