1.非element UI
<template>
<div>
<form @submit.prevent="handleSubmit" @keydown.enter.prevent="handleSubmit">
<div>
<label for="username">用户名:</label>
<input type="text" id="username" v-model="username" required />
</div>
<div>
<label for="password">密码:</label>
<input type="password" id="password" v-model="password" required />
</div>
<div>
<button type="submit">登录</button>
</div>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
};
},
methods: {
handleSubmit() {
if (this.validateForm()) {
this.$router.push({ path: '/hou' });
this.username = '';
this.password = '';
}
},
//此方法为验证按键的方法,不可删除
//鼠标点击有表单required验证
validateForm() {
if (!this.username || !this.password) {
alert('用户名和密码不能为空');
return false;
}
return true;
}
}
}
</script>
<style scoped>
form {
display: flex;
flex-direction: column;
max-width: 300px;
margin: 0 auto;
}
label {
margin-top: 10px;
}
input {
padding: 5px;
margin-top: 5px;
}
button {
padding: 10px 20px;
margin-top: 10px;
font-size: 16px;
cursor: pointer;
}
</style>
2.element UI
<template>
<div>
<el-form :model="form" :rules="rules" ref="loginForm" @submit.native.prevent="handleSubmit" @keydown.enter.prevent="handleSubmit">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" native-type="submit" ref="loginButton" >登录</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
form: {
username: '',
password: ''
},
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
]
}
};
},
methods: {
handleSubmit() {
this.$refs.loginForm.validate((valid) => {
if (valid) {
this.$router.push({ path: '/qian' });
} else {
console.log('表单验证失败');
return false;
}
});
},
},
}
</script>
<style scoped>
.el-form {
max-width: 300px;
margin: 0 auto;
}
.el-button {
width: 100%;
}
</style>