先看一下官网上的表单验证

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="活动名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  <el-form-item label="活动区域" prop="region">
    <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="活动时间" required>
    <el-col :span="11">
      <el-form-item prop="date1">
        <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
      </el-form-item>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-form-item prop="date2">
        <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
      </el-form-item>
    </el-col>
  </el-form-item>
  <el-form-item label="即时配送" prop="delivery">
    <el-switch v-model="ruleForm.delivery"></el-switch>
  </el-form-item>
  <el-form-item label="活动性质" prop="type">
    <el-checkbox-group v-model="ruleForm.type">
      <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
      <el-checkbox label="地推活动" name="type"></el-checkbox>
      <el-checkbox label="线下主题活动" name="type"></el-checkbox>
      <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
    </el-checkbox-group>
  </el-form-item>
  <el-form-item label="特殊资源" prop="resource">
    <el-radio-group v-model="ruleForm.resource">
      <el-radio label="线上品牌商赞助"></el-radio>
      <el-radio label="线下场地免费"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="活动形式" prop="desc">
    <el-input type="textarea" v-model="ruleForm.desc"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      return {
        ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        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' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

官网的表单验证，是通过在表单上加 rules 属性传入约定的验证规则，并且将 form-item 的 prop 设置为需要校验的字段名。

需要注意的地方

form-item 的 prop 值必须与 rules 的属性名一致；

form 绑定的 :model 必须与 form-item 的 v-model 绑定；

否则，表单验证不通过。

在表单 form-item 上单独添加 rules

这种方式适用于需要个别检验的字段，或者表单字段有变动的校验；

<el-form-item 
  label="电话号码"
  class="el-form-item--small has-error"
  :prop="phoneNum"
  :rules="[
            { required: true, message: '请输入电话号码', trigger: 'blur' }, 
            { required: true, pattern: /^((13|14|15|16|17|18)[0-9]{1}\d{8})|((166|199|198)[0-9]{1}\d{7})$/, message: '请输入正确的电话号码', trigger: 'blur' }
          ]">
    <el-input v-model="v.phoneNum" :maxlength="11" placeholder clearable></el-input>
</el-form-item>

表单验证没有通过，依然提交了！

这个问题，有可能是因为在提交的方法中没有加 this.$refs[formName]

submitForm(formName) {
  this.$refs[formName].validate((valid) => {
    if (valid) {
      // 完成提交表单的操作！
    } else {
      // 返回错误信息！
      console.log('error submit!!');
      return false;
    }
  });
}

方法中的参数 formName 传入的是 Form 的 ref 标识。

清除表单验证信息

场景：表单验证出现后，关闭表单重新打开，发现还没有输入值，验证信息就已经出现。

原因：这是因为在表单验证触发后，没有及时清除掉验证，导致再次打开是验证信息还存在。

解决：在关闭表单之前执行清除。

resetForm(formName) {
  this.$refs[formName].resetFields();
}

方法中的参数 formName 传入的是 Form 的 ref 标识。

this.$refs['formName'].resetFields()

等价于

this.$refs.formName.resetFields();

清除表单验证信息失效问题

首先，Form表单如何才能够真正使用resetFields：

1.满足ref中定义

2.prop中指定属性

3.model中绑定的属性与prop中相同

使用 $nextTick()：

this.$refs['form'].resetFields() 这个做法其实是重置表单到初始值，不是清空表单，当表单第一次在页面中渲染时所用的数据就是初始数据，如果修改对象的表单赋值没有放在 nextTick 中，就会在表单渲染时就会将这个修改对象作为初始值，所以出现无效了。使用 nextTick 保证表单在第一次渲染时是空值就可以了。

this.$nextTick(() => {
    this.$refs['form'].resetFields();
});

nextTick 用法官网是这么说的：

在下次 DOM 更新循环结束之后执行延迟回调。
在修改数据之后立即使用这个方法，获取更新后的 DOM 。

参考文档：
Element UI 官方文档：https://element.eleme.cn/#/zh-CN/component/form
CSDN 文章：https://blog.csdn.net/qq_15674775/article/details/112295845
其他文章：https://www.glxxw2018.com/study/blog/detail/zkhmocawjq.html