el-form表单验证与清空表单的方法

方式一

通过在data中定义rules验证规则实现

html表现

<el-form ref="dataFormRef" :model="dataForm" :rules="rulesForm">
  <el-form-item label="姓名：" prop="name">
    <el-input v-model="dataForm.name" />
  </el-form-item>
  <el-form-item label="年龄：" prop="age">
    <el-input v-model="dataForm.age" />
  </el-form-item>
</el-form>

vue data中的表现

data () {
  rules: {
    rulesForm: {
      name: [
        { required: true, message: "姓名不能为空", trigger: "change" },
        {
          pattern: /^[1-9]\d*(.\d{1,2})?$/,
          message: "请输入正确的姓名",
          trigger: "blur",
        },
      ]
    }
  }
}

清空表单的方法

在某一个节点操作DOM，调用清空表单方法

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

点击按钮时的methods表现

this.$refs['dataFormRef'].validate((valid) => {
  if ( valid ) {
    // 表单验证成功后的业务逻辑
  }
})