Vue的版本不同,写法不太一样
问题:用validate进行判定,结果没有生效
解决:el-form中没写ref=“loginForm” 加上,不用在ref前加:号
<template> <div id="login-container"> <el-form :rules="rules" ref="form" :model="form" label-width="60px" class="login-form" > <h2 class="login-title">小豆子图书信息管理系统</h2> <el-form-item label="用户名" prop="username" label-width="10"> <el-input v-model="form.username" placeholder="请输入用户名"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm()">登录</el-button> </el-form-item> </el-form> </div> </template> <script> export default { data() { return { form: { username: '', password: '', }, rules: { username: [ { required: true, message: "请输入用户名", trigger: "blur" }, ], password: [ { required: true, message: "请输入密码", trigger: "blur" }, { min: 6, max: 32, message: "长度在 6 到 32 个字符", trigger: ["blur", "change"], }, ], }, }; }, methods: { submitForm() { this.$refs.form.validate((valid) => { if (valid) { console.log("成功"); } else { console.log("失败"); return flase; } }); }, }, }; </script> <style scoped> .login-form { width: 350px; background-color: #fff; /* margin:160px auto; */ padding: 15px; border-radius: 20px; height: 250px; left: 50%; top: 50%; margin-left: -175px; margin-top: -125px; position: absolute; } .login-title { text-align: center; color: #606266; } #login-container { position: absolute; width: 100%; height: 100%; background-image: url("../../assets/login-bg.png"); } </style>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· Vue3状态管理终极指南:Pinia保姆级教程