点击登录按钮先检测输入框的规则检测（vue组合式）

<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提供的信息组件）