此处用ElementPlus组件库

<template>
  <el-form ref="form" :rules="rules" :model="formInline" class="demo-form-inline">
    <el-form-item prop="user" label="账号">
      <el-input v-model="formInline.user" placeholder="请输入账号"/>
    </el-form-item>
    <el-form-item prop="password" label="密码">
      <el-input v-model="formInline.password" type="password" placeholder="请输入密码"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">Query</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import {reactive, ref} from 'vue'
import {useRouter} from "vue-router";
import type {FormItemRule, FormInstance} from "element-plus";
import {ElMessage} from "element-plus";

const router = useRouter()
// 定义表单输入类型
type Form = {
  user: string,
  password: string
}
    
// 定义规则类型
/*
*	key是Form对象里面，通过keyof进行编辑
*	value是ElementPlus中已定义的数组，通过import导入
*/
type Rules = {
  [k in keyof Form]?: Array<FormItemRule>
}

const formInline = reactive<Form>({
  user: '',
  password: '',
})
// FormInstance是实例
const form = ref<FormInstance>()
const rules = reactive<Rules>({
  user: [
    {
      required: true,
      message: "请输入账号",
      type: "string"
    }
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      type: "string"
    }
  ]
})


const onSubmit = () => {
  form.value?.validate((validate) => {
    if (validate) {
      router.push('/index')
      localStorage.setItem('token', '1')
    } else {
      ElMessage.error('请输入完整')
    }
  })
}
</script>

<style scoped>

</style>