The login page

The login form

<template> < A-form ref="formRef" :label-col="labelCol" : wrapperCol ="wrapperCol"> < A-form-item label=" user name "> < A-input Type ="text" /> </a-form-item> < A-form-item label=" password" > < A-input type="password" /> </ A-form-item > < A-form-item :wrapper-col="{ span: 14, offset: <a-button type="primary" @click="onSubmit"> </a-button> </a-form> </a-form> </template> <script lang="ts"> import { defineComponent, ref } from "vue"; export default defineComponent({ setup() { const formRef = ref(); const onSubmit = () => {}; return { labelCol: { span: 4 }, wrapperCol: { span: 14 }, onSubmit, }; }}); </script>Copy the code

Ref gets the reference to the form

// declare const formRef = ref() <a-form ref="formRef" :label-col="labelCol" : wrapperCol ="wrapperCol"> </a-form>Copy the code

Define the data format of our form

interface IFormState {
  username: string;
  password: string;
}
Copy the code

Initialize our data

  setup() {
    const formState = reactive<IFormState>({
      username: "".password: ""});return {
      formState,
    };
  },
Copy the code

Bind my data

Again, why do I write this, in order to achieve two-way data binding MVVM

<a-form :model="formState" > <a-form-item label=" username" > <a-input type="text" v-model:value=" formstate.username "/> </a-form-item> < A-form-item label=" password" > < A-input type="password" V-model :value="formState. Password "/> </ A-form-item > </a-form>Copy the code

Define our validation rules

    const rules = {
      username: [].password: [],};Copy the code

Use rules

< A-form :model="formState" :rules="rules" > < A-form-item label=" username" name="username"> < A-input type="text" V-model :value="formState. Username "/> </a-form-item> < A-form-item label=" password" name="password"> < A-input type="password" v-model:value="formState.password" /> </a-form-item> </a-form>Copy the code

The HTML for the final rendering

A-form-item whose name value corresponds to the member variable in formState

Perfect check rule

    const rules = {
      username: [{type: "string".required: true.message: "User name cannot be empty.".trigger: "blur"}, {type: "string".min: 2.max: 20.message: "Username length between 2 and 20 characters".trigger: "blur"],},password: [{type: "string".required: true.message: "The password must not be empty.".trigger: "blur"}, {type: "string".min: 6.max: 20.message: "Password length is 6-20 characters.".trigger: "blur",}]};Copy the code

Reference document async-Validator for verification mode

Learn to locate problems

Validating form data

Import {ValidateErrorEntity} from "ant-design-vue/lib/form/interface"; // import {ValidateErrorEntity} from "ant-design-vue/lib/form/interface"; const onSubmit = () => { formRef.value .validate() .then(() => { console.log(toRaw(formState)); }) .catch((error: ValidateErrorEntity<IFormState>) => { console.log(error); }); };Copy the code

Video Tutorial Address