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

javascript 复制代码
<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 到回调函数中。如果 validtrue,则表示表单验证通过;否则,显示错误消息。
  5. 显示消息

    • 使用 ElMessage 显示成功或失败的消息。(ElMessage是EleMent Plus提供的信息组件)
相关推荐
脑袋大大的4 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络5 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘5 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way5 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家6 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689976 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
GISer_Jing9 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆9 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding10 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js