ElementUI的form表单验证注意事项
1. 踩过的坑，记录一下。
- 验证表单时一直提示必填项未填写，实际已经填写了。
2. el-form的正确使用流程
- 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">
<!--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>
- 点击登录再次验证
// 点击登录
jump() {
this.$refs.form.validate(valid => {
if (valid) {
this.$router.push("/home");
} else {
return false;
}
});
}
完成。