表单验证

本文介绍如何使用 api.validate 和 api.clearValidateState 方法来验证表单和清空验证状态。这些方法可以帮助你在用户提交表单或其他事件中进行数据验证，并处理验证结果。

field1

field2

复制成功!

<template>
  <div>
    <form-create :rule="rule" v-model:api="fApi" :option="options"/>
    <ElButton @click="onClick1">表单验证</ElButton>
    <ElButton @click="onClick2">清空验证状态</ElButton>
    <ElButton @click="onClick3">验证field1</ElButton>
    <ElButton @click="onClick4">清空field1验证状态</ElButton>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fApi: {},
      options: {
        onSubmit: (formData) => {
          alert(JSON.stringify(formData))
        }
      },
      rule: [
        {
          type: 'input',
          field: 'field1',
          title: 'field1',
          validate: [
            {required: true, type: 'string', message: '请输入field1'},
          ]
        },
        {
          type: 'inputNumber',
          field: 'field2',
          title: 'field2',
          validate: [
            {required: true, type: 'number', message: '请输入field2'},
            {min: 10, type: 'number', message: 'field2最小为10'},
          ]
        },
      ]
    }
  },
  methods: {
    onClick1() {
      this.fApi.validate().then(() => {
        alert('验证通过')
      }).catch(() => {
        alert('未通过')
      });
    },
    onClick2() {
      this.fApi.clearValidateState();
    },
    onClick3() {
      this.fApi.validateField(['field1']).then(() => {
        alert('field1验证通过')
      }).catch(() => {
        alert('field1未通过')
      });
    },
    onClick4() {
      this.fApi.clearValidateState(['field1']);
    },
  }
}
</script>