element ui的表单验证有人搞过吗,照着demo敲了一遍,怎么都通不过
html部分
<el-form :model="userInfo" :rules="rules" ref="loginForm">
<el-form-item prop="name">
<el-input type="text" v-model="userInfo.username" ></el-input>
</el-form-item>
<el-form-item prop="pwd">
<el-input v-model="userInfo.password" type="password"></el-input>
</el-form-item>
<el-form-item>
<el-checkbox name="type" v-model="userInfo.remember">
<span>记住密码</span>
</el-checkbox>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login('loginForm')">登录</el-button>
</el-form-item>
</el-form>
js部分
export default {
data() {
return {
userInfo: {
username: '',
password: '',
remember: false
},
rules : {
name : [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
pwd : [
{ required: true, message: '请输入密码', trigger: 'blur' }
]
}
};
},
methods: {
login(formName){
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
}
}
};