问题背景:
vue+element-ui项目,设计登录界面。 用户名和密码均为必填项,如果不填写,输入框下方会提示“请输入用户名”或“请输入密码”。
问题描述:
问题分析:
相关代码:
//html代码
登录账号
用户名:
密码:
登录
//js代码
export default {
data() {
return {
loginForm: {
username:'' ,
password:'' ,
},
rules: {
username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
password: [{required: true, message: '请输入密码', trigger: 'blur'}]
}
}
}
}
element-ui英文文档中,表单验证示例elementui代码提示,代码如下:
-
立即创建
重置
export default {
data() {
return {
ruleForm: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
region: [
{ required: true, message: '请选择活动区域', trigger: 'change' }
],
date1: [
{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
],
date2: [
{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }
],
type: [
{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
],
resource: [
{ required: true, message: '请选择活动资源', trigger: 'change' }
],
desc: [
{ required: true, message: '请填写活动形式', trigger: 'blur' }
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
经过比较elementui代码提示,我的没有:model=""
解决方案:
添加对应的:model=""
(我的是loginForm,是用来封装用户名和密码的对象)
可以解决。