vue+elementui 登录注册页面实现

1.实现效果

2. 代码实现

        2.1使用elementUI文档中Tabs标签页

         2.2在components中新建两个文件  login.vue   register.vue 

                login.vue         

            回车登录（ 按钮添加native-type="submit"  登录表单添加@submit.native.prevent） 

1.  
   <template>
2.  
   <div class="login">
3.  
   <div class="login_form">
4.  
   <p>后台管理系统</p>
5.  
   <el-tabs v-model="activeName" @tab-click="handleClick" >
6.  
   <el-tab-pane label="登录" name="first">
7.  
   <el-form
8.  
   :model="loginForm"
9.  
   :rules="rules"
10.  
    ref="loginForm"
11.  
    @submit.native.prevent
12.  
    >
13.  
    <el-form-item label="" prop="account" class="elItem">
14.  
    <el-input
15.  
    type="text"
16.  
    autocomplete="off"
17.  
    v-model="loginForm.account"
18.  
    prefix-icon="el-icon-user-solid"
19.  
    placeholder="请输入用户名"
20.  
    ></el-input>
21.  
    </el-form-item>
22.  
    <el-form-item label="" prop="password">
23.  
    <el-input
24.  
    type="password"
25.  
    autocomplete="off"
26.  
    v-model="loginForm.password"
27.  
    prefix-icon="el-icon-lock"
28.  
    placeholder="请输入密码"
29.  
    ></el-input>
30.  
    </el-form-item>
31.  
    <el-form-item class="btns">
32.  
    <el-button type="primary" @click="goToLogin" native-type="submit">登录</el-button>
33.  
    <el-button @click="resetLoginForm">重置</el-button>
34.  
    </el-form-item>
35.  
    </el-form>
36.  
    </el-tab-pane>
37.  
    <el-tab-pane label="注册" name="second">
38.  
    //注册组件
39.  
    <register></register>
40.  
    </el-tab-pane>
41.  
    </el-tabs>
42.  
    </div>
43.  
    </div>
44.  
    </template>
45.  
     
46.  
    <script>
47.  
    //引入注册组件
48.  
    import register from '@/components/register';
49.  
    export default {
50.  
    data() {
51.  
    var validateAccount = (rule, value, callback) => {
52.  
    if (value === "") {
53.  
    return callback(new Error("账号不能为空"));
54.  
    } else if (value === "admin") {
55.  
    callback();
56.  
    } else {
57.  
    callback(new Error("请输入正确的用户名"));
58.  
    }
59.  
    };
60.  
    var validatePassword = (rule, value, callback) => {
61.  
    if (value === "") {
62.  
    callback(new Error("请输入密码"));
63.  
    } else if (value === "123456") {
64.  
    callback();
65.  
    } else {
66.  
    callback(new Error("请输入正确的密码"));
67.  
    }
68.  
    };
69.  
    return {
70.  
    loginForm: {
71.  
    account: "",
72.  
    password: "",
73.  
    },
74.  
    activeName:'first',//默认显示登录页面
75.  
    rules: {
76.  
    account: [
77.  
    {
78.  
    validator: validateAccount,
79.  
    trigger: "blur",
80.  
    },
81.  
    ],
82.  
    password: [
83.  
    {
84.  
    validator: validatePassword,
85.  
    trigger: "blur",
86.  
    },
87.  
    ],
88.  
    },
89.  
    };
90.  
    },
91.  
    methods: {
92.  
    //固定的账户密码判断实现简单的登录跳转功能，只能测试用
93.  
    goToLogin() {
94.  
    this.$refs["loginForm"].validate((valid) => {
95.  
    if (valid) {
96.  
    if (
97.  
    this.loginForm.account != "admin" ||
98.  
    this.loginForm.password != "123456"
99.  
    ) {
100.  
     this.$message.error("账号密码不正确");
101.  
     return false;
102.  
     } else {
103.  
     this.$message({ message: "登陆成功", type: "success" });
104.  
     this.$router.push("/home");
105.  
     }
106.  
     } else {
107.  
     this.$message.error("登陆失败");
108.  
     return false;
109.  
     }
110.  
     });
111.  
     },
112.  
     resetLoginForm() {
113.  
     this.$refs["loginForm"].resetFields();
114.  
     },
115.  
     handleClick(){}
116.  
     },
117.  
     components:{
118.  
     register
119.  
     }
120.  
     };
121.  
     </script>
122.  
      
123.  
     <style scoped lang='less'>
124.  
     .login {
125.  
     width: 100%;
126.  
     height: 100vh;
127.  
     background-image: url("../assets/login/login.jpg");//背景图
128.  
     background-size: 100% 100%;
129.  
     background-position: center center;
130.  
     overflow: auto;
131.  
     position: relative;
132.  
     .login_form {
133.  
     width: 400px;
134.  
     height: 360px;
135.  
     position: absolute;
136.  
     left: 78%;
137.  
     top: 50%;
138.  
     margin-left: -200px;
139.  
     margin-top: -150px;
140.  
     padding: 10px;
141.  
     background: #fff;
142.  
     border-radius: 10px;
143.  
     box-shadow: 0 0 10px #ddd;
144.  
     .btns {
145.  
     display: flex;
146.  
     justify-content: flex-end;
147.  
     }
148.  
     }
149.  
     p {
150.  
     font-size: 24px;
151.  
     text-align: center;
152.  
     font-weight: 600;
153.  
     }
154.  
     }
155.  
     </style>

        register.vue 

1.  
    
2.  
   <template>
3.  
   <el-form
4.  
   :model="ruleForm"
5.  
   :rules="rules"
6.  
   ref="ruleForm"
7.  
   class="demo-ruleForm"
8.  
   >
9.  
   <el-form-item label="" prop="name"
10.  
    ><el-input
11.  
    type="text"
12.  
    autocomplete="off"
13.  
    v-model="ruleForm.name"
14.  
    prefix-icon="el-icon-user-solid"
15.  
    placeholder="请输入用户名"
16.  
    ></el-input
17.  
    ></el-form-item>
18.  
    <el-form-item label="" prop="pass"
19.  
    ><el-input
20.  
    type="password"
21.  
    autocomplete="off"
22.  
    v-model="ruleForm.pass"
23.  
    prefix-icon="el-icon-lock"
24.  
    placeholder="请输入密码"
25.  
    ></el-input
26.  
    ></el-form-item>
27.  
    <el-form-item label="" prop="checkPass"
28.  
    ><el-input
29.  
    type="password"
30.  
    autocomplete="off"
31.  
    v-model="ruleForm.checkPass"
32.  
    prefix-icon="el-icon-lock"
33.  
    placeholder="请输入密码"
34.  
    ></el-input
35.  
    ></el-form-item>
36.  
    <el-form-item class="btns">
37.  
    <el-button type="primary" @click="submitForm('ruleForm')">注册</el-button>
38.  
    <el-button @click="resetForm('ruleForm')">重置</el-button>
39.  
    </el-form-item>
40.  
    </el-form>
41.  
    </template>
42.  
     
43.  
    <script>
44.  
    export default {
45.  
    data() {
46.  
    var validatePass = (rule, value, callback) => {
47.  
    if (value === "") {
48.  
    callback(new Error("请输入密码"));
49.  
    } else {
50.  
    if (this.ruleForm.checkPass !== "") {
51.  
    this.$refs.ruleForm.validateField("checkPass");
52.  
    }
53.  
    callback();
54.  
    }
55.  
    };
56.  
     
57.  
    var validatePass2 = (rule, value, callback) => {
58.  
    if (value === "") {
59.  
    callback(new Error("请再次输入密码"));
60.  
    } else if (value !== this.ruleForm.pass) {
61.  
    callback(new Error("两次输入密码不一致!"));
62.  
    } else {
63.  
    callback();
64.  
    }
65.  
    };
66.  
     
67.  
    return {
68.  
    activeName: "second",
69.  
    ruleForm: {
70.  
    name: "",
71.  
    pass: "",
72.  
    checkPass: "",
73.  
    },
74.  
    rules: {
75.  
    name: [
76.  
    { required: true, message: "请输入您的名称", trigger: "blur" },
77.  
    { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },
78.  
    ],
79.  
    pass: [{ required: true, validator: validatePass, trigger: "blur" }],
80.  
    checkPass: [
81.  
    { required: true, validator: validatePass2, trigger: "blur" },
82.  
    ],
83.  
    },
84.  
    };
85.  
    },
86.  
     
87.  
    methods: {
88.  
    submitForm(formName) {
89.  
    this.$refs[formName].validate((valid) => {
90.  
    if (valid) {
91.  
    this.$message({
92.  
    type: "success",
93.  
    message: "注册成功",
94.  
    });
95.  
    // this.activeName: 'first',
96.  
    } else {
97.  
    console.log("error submit!!");
98.  
    return false;
99.  
    }
100.  
     });
101.  
     },
102.  
      
103.  
     resetForm(formName) {
104.  
     this.$refs[formName].resetFields();
105.  
     },
106.  
     },
107.  
     };
108.  
     </script>
109.  
     <style scoped lang="less">
110.  
     .btns {
111.  
     display: flex;
112.  
     justify-content: flex-end;
113.  
     }
114.  
     </style>

这篇好文章是转载于：学新通技术网