云e办
视频学习地址
前端目标
表单可以校验是否为空,如果为空,点击登录时弹出错误提示框。
效果
登录页面代码
登录页面的views,Login.vue
<template>
<div>
<el-form :rules="rules" label-position="left" label-width="70px" ref="loginForm" :model="loginForm" class="loginContainer">
<h3 class="login-title">系统登录</h3>
<el-form-item label="用户名" prop="username">
<el-input type="text" auto-complete="false" v-model="loginForm.username"
placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" auto-complete="false" v-model="loginForm.password"
placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item label="验证码" prop="code">
<el-input type="text" auto-complete="false" v-model="loginForm.code" placeholder="点击更换验证码"
style="width: 150px;margin-right: 5px"></el-input>
<img :src="captchaUrl"/>
</el-form-item>
<el-checkbox v-model="checked" class="login-remember">记住我</el-checkbox>
<el-button type="primary" style="width: 100%;" @click="submitLogin">登录</el-button>
</el-form>
</div>
</template>
<script>
export default {
name: "Login",
data() {
return {
captchaUrl: '',
loginForm: {
username: '',
password: '',
code: '',
},
rules: {
username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
password: [{required: true, message: '请输入密码', trigger: 'blur'}],
code: [{required: true, message: '请输入验证码', trigger: 'blur'}]
},
checked:true,
}
},
methods: {
submitLogin() {
this.$refs.loginForm.validate((valid) => {
if (valid) {
alert('submit!');
} else {
this.$message.error('请输入所有字段');
return false;
}
});
}
}
}
</script>
<style lang="less" scoped>
.loginContainer {
border-radius: 15px;
background-clip: padding-box;
margin: 180px auto;
width: 350px;
padding: 15px 35px 15px 35px;
background: #fff;
border: 1px solid #eaeaea;
box-shadow: 0 0 25px #cac6c6;
.login-title {
margin: 10px auto 40px auto;
text-align: center;
}
.login-remember {
text-align: left;
margin: 0 0 15px 0;
}
}
</style>
2021.12.29
因任务繁忙,暂时不连载,预计22年2月再继续更新