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 ) {
    // 表單驗證成功后的業務邏輯
  }
})