概念:
1.在表單的提交按鈕上添加 Vue 原生屬性 native-type="submit"
可以讓按鈕變爲表單提交按鈕;
2.阻止表單默認提交事件(默認是阻止),在表單上(即<el-form>標籤上)添加 @submit.native.prevent
即可
3.因爲el-form默認不支持表單回車提交,在表單上(即<el-form>標籤上)添加@keyup.enter.native="submitForm('form')"可實現回車提交表單
template:
<el-form ref="form" :model="form" :rules="rules" @keyup.enter.native="submitForm('form')">
<el-form-item label="" prop="username">
<el-input prefix-icon="el-icon-user-solid" placeholder="請輸入用戶名" v-model="form.username" clearable></el-input>
</el-form-item>
<el-form-item label="" prop="password">
<el-input prefix-icon="el-icon-lock" placeholder="請輸入密碼" v-model="form.password" show-password clearable></el-input>
</el-form-item>
<el-button class="button" type="primary" @click="submitForm('form')">登錄</el-button>
</el-form>
script:
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
// console.log(this.form);
this.$axios.post('login', this.form).then((response) => {
console.log(response);
this.$message({
message: '登陸成功',
type: 'success'
});
localStorage.setItem('token', response.data.access_token); //本地存儲token值
// console.log(localStorage.getItem('token'));
this.$router.push({
path: '/',
})
}).catch((error) => {
this.$message({
message: '賬號或密碼錯誤',
type: 'error'
});
});
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
},
created() {
this.token = localStorage.getItem('token'); //在登錄頁面驗證成功而保存的token值,進行獲取
if (this.token) { //若this.token存在
this.$router.push({path:'/'})
}
}
}