1. 踩过的坑,记录一下。
- 验证表单时一直提示必填项未填写,实际已经填写了。
- el-form就是最外层的form表单,做验证有
三个必填属性
,不填写验证就会不正确。
- ref属性:相当于ID,稍后的提交按钮函数会用到它。
- :model:绑定要用来验证的数据对象,一定要是对象。
- :rules:用来验证表单的规则。
| <el-form ref="form" :model="form" :rules="rules"></el-form> |
- 声明上方要用到的变量:form, rules
| data() { |
| return { |
| form: { |
| username: "" |
| }, |
| |
| rules: { |
| |
| username: [ |
| { required: true, message: "请输入用户名", trigger: "blur" }, |
| { min: 3, max: 20, message: "长度在 3 到 20 个字符", trigger: "blur" } |
| ], |
| } |
| }; |
| }, |
- el-form的子标签el-form-item用一个属性prop接收验证规则,input标签绑定数据,注意:
prop属性的字符串和绑定的变量名一定要相同!
。
- model绑定的就是form,所以
el-inpput里面不要绑定别的变量
。
- prop属性的字符串就是rules里面属性的名字
| <el-form ref="form" :model="form" :rules="rules" class="loginBox"> |
| <el-form-item prop="username"> |
| |
| <el-input v-model="form.username" placeholder="请输入内容" prefix-icon="el-icon-user-solid"></el-input> |
| </el-form-item> |
| <el-button type="primary" @click="jump">登陆</el-button> |
| </el-form> |
- 点击登录再次验证
| |
| jump() { |
| this.$refs.form.validate(valid => { |
| if (valid) { |
| this.$router.push("/home"); |
| } else { |
| return false; |
| } |
| }); |
| } |
完成。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战