<template><el-form :model="user" :rules="rules" ref="loginForm" label-width="auto" style="max-width: 600px"><el-form-item label="用户名" prop="name"><el-input v-model="user.name" id="name" placeholder="请输入用户名" /></el-form-item><el-form-item label="密码" prop="pass"><el-input v-model="user.pass" id="pass" placeholder="请输入密码" /></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">登录</el-button></el-form-item></el-form>
</template><script lang="ts" setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'// 响应式的对象
const user = reactive({name: '',pass: '',
})// 设置验证规则
const rules = {name: [{ required: true, message: '请输入用户名', trigger: 'blur' },{ min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' },],pass: [{ required: true, message: '请输入密码', trigger: 'blur' }],
}// 创建对表单的引用
const loginForm = ref(null)// 点击登录按钮的时候，验证是否满足rules规则
const onSubmit = () => {if (loginForm.value) {loginForm.value.validate((valid: boolean) => {if (valid) {// 表单验证通过，执行登录逻辑console.log(user)ElMessage.success('登录成功')} else {// 表单验证未通过，显示错误信息ElMessage.error('请检查输入的内容')return false}})}
}
</script>

解释

1. 创建响应式对象：

   • 使用 reactive 创建响应式的 user 对象。
   • 使用 ref 创建对表单的引用 loginForm。

2. 设置验证规则：

   • 定义 rules 对象，包含用户名和密码的验证规则。

3. 模板中使用 ref 属性：

   • 在 <el-form> 元素上使用 ref="loginForm"，将其引用注册到 loginForm。

4. onSubmit 方法：

   • 在 onSubmit 方法中，通过 loginForm.value 访问表单，并调用 validate 方法验证表单。
   • validate 方法执行后，传递一个布尔值 valid 到回调函数中。如果 valid 为 true，则表示表单验证通过；否则，显示错误消息。

5. 显示消息：

   • 使用 ElMessage 显示成功或失败的消息。（ElMessage是EleMent Plus提供的信息组件）