ElementUI的form表单验证注意事项

ElementUI的form表单验证注意事项

1. 踩过的坑,记录一下。

  1. 验证表单时一直提示必填项未填写,实际已经填写了。

2. el-form的正确使用流程

  1. el-form就是最外层的form表单,做验证有三个必填属性,不填写验证就会不正确。
  • ref属性:相当于ID,稍后的提交按钮函数会用到它。
  • :model:绑定要用来验证的数据对象,一定要是对象。
  • :rules:用来验证表单的规则。
<el-form ref="form" :model="form" :rules="rules"></el-form>
  1. 声明上方要用到的变量:form, rules
data() {
return {
form: {
username: ""
},
// 验证的规则
rules: {
// 用户名
username: [
{ required: true, message: "请输入用户名", trigger: "blur" },
{ min: 3, max: 20, message: "长度在 3 到 20 个字符", trigger: "blur" }
],
}
};
},
  1. 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">
<!--username和form的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>
  1. 点击登录再次验证
// 点击登录
jump() {
this.$refs.form.validate(valid => {
if (valid) {
this.$router.push("/home");
} else {
return false;
}
});
}

完成。

posted @   Lyc1cccccccc  阅读(105)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示