vue＋elementui表单校验没有效果

2023-03-28 10:55| 来源: 网络整理| 查看: 265

在这里插入图片描述在点击提交之前应该保证输入框中用户填入了数据，所以使用elementUI中的rules进行校验

本人遇到的问题; 即使填入了数据还是显示没有数据

本人的书写错误在于 el-form-item中的prop与el-input所绑定的不是名字不一致：

正确的应该如下：

rules为校验规则 ref和model都是必须要有的 :model="loginForm"中loginFrom应是一个对象在data中声明

loginForm:{ username:'', password:'' }, loginRules:{ username:[ { required: true, message: '请输入账号密码', trigger: 'blur' }, { min: 3, max:10, message: '长度在 3 到 10 个字符', trigger: 'blur' } ], password:[ { required: true, message: '请输入账号密码', trigger: 'blur' }, { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' } ] }

在点击提交按钮时触发事件

login(){ this.$refs.loginFormRef.validate(async valid=>{ //当都填入数据 valid为true if(!valid) return; //如果没有填入则不再执行以下代码 //以下代码是发请求。。。 ... }) }

【本文地址】

公司简介

联系我们