ant-Design-vue提交按钮放在表单外提交，自定义提交按钮

最新推荐文章于 2024-06-25 15:53:03 发布

可爱小仙子

最新推荐文章于 2024-06-25 15:53:03 发布

阅读量2k

点赞数 1

分类专栏： vue 文章标签：前端

本文链接：https://blog.csdn.net/qq_42661587/article/details/126479137

版权

vue 专栏收录该内容

40 篇文章 4 订阅

订阅专栏

这是一个关于Vue.js的表单验证示例，包括密码、确认密码和年龄输入的验证。当用户提交表单时，会触发各种验证函数，如`checkAge`、`validatePass`和`validatePass2`，确保输入符合要求。如果所有字段都有效，表单将通过验证并打印消息，否则将显示错误信息。

摘要由CSDN通过智能技术生成

<template>
  <a-form
    ref="formRef"
    name="custom-validation"
    :model="formState"
    :rules="rules"
    v-bind="layout"
    @finish="handleFinish"
    @validate="handleValidate"
    @finishFailed="handleFinishFailed"
  >
    <a-form-item has-feedback label="Password" name="pass">
      <a-input
        v-model:value="formState.pass"
        type="password"
        autocomplete="off"
      />
    </a-form-item>
    <a-form-item has-feedback label="Confirm" name="checkPass">
      <a-input
        v-model:value="formState.checkPass"
        type="password"
        autocomplete="off"
      />
    </a-form-item>
    <a-form-item has-feedback label="Age" name="age">
      <a-input-number v-model:value="formState.age" />
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
      <!-- <a-button type="primary" html-type="submit">Submit</a-button> -->
      <a-button style="margin-left: 10px" @click="resetForm">Reset</a-button>
    </a-form-item>
  </a-form>
  <a-button type="primary" @click="sub()">Submit</a-button>
</template>
<script>
export default {
  data() {
    let checkAge = async (_rule, value) => {
      if (!value) {
        return Promise.reject("Please input the age");
      }

      if (!Number.isInteger(value)) {
        return Promise.reject("Please input digits");
      } else {
        if (value < 18) {
          return Promise.reject("Age must be greater than 18");
        } else {
          return Promise.resolve();
        }
      }
    };

    let validatePass = async (_rule, value) => {
      if (value === "") {
        return Promise.reject("Please input the password");
      } else {
        if (this.formState.checkPass !== "") {
          this.$refs["formRef"].validateFields("checkPass");
        }

        return Promise.resolve();
      }
    };

    let validatePass2 = async (_rule, value) => {
      if (value === "") {
        return Promise.reject("Please input the password again");
      } else if (value !== this.formState.pass) {
        return Promise.reject("Two inputs don't match!");
      } else {
        return Promise.resolve();
      }
    };
    return {
      layout: {
        labelCol: {
          span: 4,
        },
        wrapperCol: {
          span: 14,
        },
      },
      formState: {
        pass: "",
        checkPass: "",
        age: undefined,
      },
      rules: {
        pass: [
          {
            required: true,
            validator: validatePass,
            trigger: "change",
          },
        ],
        checkPass: [
          {
            validator: validatePass2,
            trigger: "change",
          },
        ],
        age: [
          {
            validator: checkAge,
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    handleFinish() {
      console.log("handleFinish");
    },
    handleFinishFailed() {
      console.log("handleFinishFailed");
    },
    resetForm() {
      console.log("resetForm");
    },
    handleValidate() {
      console.log("handleValidate");
    },
    sub() {
      console.info("sub");
      this.$refs["formRef"]
        .validate()
        .then(() => {
          console.info("通过");
        })
        .catch(() => {
          console.info("不通过");
        });
    },
  },
};
</script>