vue结合element-ui的表单验证
1.使用此方法前检查prop一定必须要写在上面,写在里面的input上或者其他任何地方都不行(el-form-item prop属性绑定)
<el-form-item prop="username">
<el-input v-model="loginForm.username" placeholder="请输入账号"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type='password' v-model="loginForm.password" placeholder="请输入密码"></el-input>
</el-form-item>
2.el-form rules,model属性绑定,ref标识
<el-form ref="loginForm" :model="loginForm" :rules='rules'>
<el-form-item prop="username">
<el-input v-model="loginForm.username" placeholder="请输入账号"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type='password' v-model="loginForm.password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" class="btn" @click='submitForm("loginForm")'>登录</el-button>
</el-form-item>
</el-form>
methods: {
async submitForm(formName){
//表单验证的方法 this.$refs[formName].validate((valid)=>{})
this.$refs[formName].validate(async valid=>{
if(valid){
this.$message({
type:'success',
message:'登陆成功'
})
// this.$router.push('manage')
this.$router.push("manage");
}else{
this.$notify.error({
title:'错误',
message:'请输入正确的账号或密码',
offset:100
})
return false
}
})
}
},
formName是form的ref属性 //
如果 this.$refs[formName].validate()
方式不识别。需要使用: this.$refs.formName.validate()