elementUI+Vue实现管理系统的登录页面

<template>
<div class="maxbox">
<div id="appp">
<vue-particles
color="#dedede"
:particleOpacity="0.7"
:particlesNumber="80"
shapeType="circle"
:particleSize="4"
linesColor="#dedede"
:linesWidth="1"
:lineLinked="true"
:lineOpacity="0.4"
:linesDistance="150"
:moveSpeed="3"
:hoverEffect="true"
hoverMode="grab"
:clickEffect="true"
clickMode="push"
class="beijing"
></vue-particles>
</div>
<!--

<style lang="less">
// 这一个部分是插件的哦
.beijing {
background-image: url("./start.jpg");
background-size: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
-->
<el-form
:model="loginForm"
status-icon
:rules="rules"
ref="loginForm"
label-width="100px"
class="demo-ruleForm"
>
<h1 class="title">
<i class="el-icon-menu"></i>
华联超市管理系统-登录
</h1>
<el-form-item label="账号" prop="username">
<el-input type="text" v-model="loginForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="text" v-model="loginForm.password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="checkPass">
<el-input type="text" v-model="loginForm.checkPass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('loginForm')">提交</el-button>
<el-button @click="resetForm('loginForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
// 包含特殊字符哦
const checkSpecificKey = function(str) {
// 正则表达
var specialKey =
"[`~!#$^&*()=|{}':;',\\[\\].<>/?~！#￥……&*（）——|{}【】‘；：”“'。，、？]‘'";
for (var i = 0; i < str.length; i++) {
if (specialKey.indexOf(str.substr(i, 1)) != -1) {
//specialKey是否含有某一个你输入的特殊字符
return false; //如果你输入的账号中有特殊字符 直接退出来哦
}
}
return true;
};
// 验证密码的函数
const pass = (rule, value, callback) => {
if (value === "") {
//为空的验证
callback(new Error("请输入密码"));
} else if (value.length < 3 || value.length > 6) {
//这是密码长度的验证
callback(new Error("密码长度 3 - 6 位"));
} else if (!checkSpecificKey(value)) {
//
callback(new Error("密码不能包含特殊字符"));
} else {
if (this.loginForm.checkPass !== "") {
// 如果确认密码不为空
this.$refs.loginForm.validateField("checkPass"); // 调用确认密码的验证（一致性验证）
}
// 成功的回调
callback();
}
};
// 确认密码的验证函数
const checkPass = (rule, value, callback) => {
// rule是传入的验证规则 value是用户输入的值 callback是一个回调函数
if (value === "") {
// 如果等于空
console.log(value);
callback(new Error("请再次输入密码11")); // 输出提示
} else if (value !== this.loginForm.password) {
// 如果确认密码 和 密码不同
callback(new Error("两次输入密码不一致1"));
}
// 如果直接调用 不传入任何错误信息 就是成功 绿色的勾勾
callback();
};
return {
// 登录表单的数据
loginForm: {
username: "",
password: "",
checkPass: ""
},
// 验证的规则（一份数据）
rules: {
// 验证用户名
username: [
// 非空验证
{ required: true, message: "请输入账号", trigger: "blur" },
{ min: 3, max: 5, message: "账号长度在 3 - 5 位", trigger: "blur" }
],
// 验证密码
password: [
// 非空验证
{ required: true, validator: pass, trigger: "blur" }
],
// 验证确认密码
checkPass: [
// 自定义验证函数
{ required: true, validator: checkPass, trigger: "blur" }
]
/*
验证规则字段说明：
{ required: true/false 必填, message: "错误的提示信息", trigger: "触发验证的方式" }
{ min: 最小长度, max: 最大长度, message: "错误的提示信息", trigger: "触发验证的方式" }
{ validator： 自定义验证规则函数名， trigger: 'blur'}
*/
}
};
},
methods: {
// 点击登录按钮 触发这个函数
submitForm(formName) {
// 获取表单组件 调用验证方法
this.$refs[formName].validate(valid => {
// 如果所有验证通过 valid就是true
if (valid) {
alert("前端验证通过 可以提交给后端！");
// 后续就可以把收集的账号和密码 一起发送给后端 验证用户名和密码的正确性。
// 收集账号和密码
let params = {
username: this.loginForm.username,
password: this.loginForm.password
};
// 发送请求 把参数发给后端（把用户名和密码发给后端 验证是否正确）
// console.log(params)
// 直接跳转到后端主页
// this.$router.push("/");
} else {
// 否则就是false
alert("前端验证失败 不能提交给后端！");
return false;
}
});
},
// 点击重置按钮 触发这个函数
resetForm(formName) {
// this.$refs.loginForm.resetFields() 获取整个表单组件 调用重置方法
this.$refs[formName].resetFields();
}
}
};
</script>
<style lang="less">
// 这一个部分是插件的哦
.beijing {
background-image: url("./start.jpg");
background-size: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#app {
//最大的容器
width: 100%;
height: 100%;
margin: 10 auto;
text-align: center;
.el-form {
//第二大的容器
// 垂直 水平 居中
width: 450px;
height: 350px;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
.el-form-item {
//这是那三行的错误哦
margin-top: 28px; //让变淡之间是有间距的哦
.el-form-item__label {
color: #ffffff;
}
}
.title {
//超市管理系统的标题
color: #ffffff;
padding-left: 40px; //让变体居中 这里使用的是padding-left
}
}
}
</style>