增加注册 修改登录

src/components/Login.vue

@@ -163,33 +163,18 @@
       <div class="el-card box-card is-always-shadow">
         <div class="el-card__body">
           <img alt class="logo" src="../assets/img/logo.png" />
-          <form class="el-form login-form">
+          <el-form class="el-form login-form" :model="msg" :rules="rules" ref="msg" label-width="0" >
             <div class="form-title">管理员登录</div>
-            <div class="el-form-item is-required el-form-item--small">
-              <div class="el-form-item__content" style="margin-left: 0px;">
-                <div class="el-input el-input--small">
-                  <input type="text" autocomplete="off" v-model="msg.Account" placeholder="请输入用户名"
-                    class="el-input__inner" maxlength="25" />
-                </div>
-              </div>
-            </div>
-            <div class="el-form-item is-required el-form-item--small">
-              <div class="el-form-item__content" style="margin-left: 0px;">
-                <div class="el-input el-input--small">
-                  <input type="password" autocomplete="off" placeholder="请输入密码" v-model="msg.Password"
-                    class="el-input__inner" maxlength="25" />
-                </div>
-              </div>
-            </div>
-            <div class="el-form-item is-required el-form-item--small">
-              <div class="el-form-item__content" style="margin-left: 0px;">
-                <div class="el-input el-input--small" style="width: 140px;">
-                  <input type="text" autocomplete="off" placeholder="验证码" v-model="msg.ValidataCode"
-                    class="el-input__inner" maxlength="4" />
-                </div>
+            <el-form-item label="" prop="Account">
+                <el-input v-model="msg.Account" placeholder="请输入用户名" maxlength="25"/>
+            </el-form-item>
+            <el-form-item label="" prop="Password">
+                <el-input v-model="msg.Password" placeholder="请输入密码" maxlength="25"/>
+            </el-form-item>
+            <el-form-item label="" prop="ValidataCode">
+                <el-input v-model="msg.ValidataCode" style="width:140px;" placeholder="验证码" maxlength="25"/>
                 <img class="pic-captcha" src="/web/index.php?r=site%2Fpic-captcha&amp;v=5e9e7ef6a93ac6.36592545" />
-              </div>
-            </div>
+            </el-form-item>
             <div class="el-form-item el-form-item--small">
               <div class="el-form-item__content" style="margin-left: 0px;">
                 <label class="el-checkbox">
@@ -205,13 +190,13 @@
             </div>
             <div class="el-form-item el-form-item--small">
               <div class="el-form-item__content" style="margin-left: 0px;">
-                <button type="button" @click="login()"
+                <button type="button" @click="submitForm('msg')"
                   class="el-button login-btn el-button--primary el-button--small is-round">
                   <span>登录</span>
                 </button>
               </div>
             </div>
-          </form>
+          </el-form>
           <img alt class="logo" />
           <div class="register_box">
             <span class="register">忘记密码?</span>
@@ -233,7 +218,18 @@
           Account: '', //账号
           Password: '', //密码
           ValidataCode: '', //验证码
-        }
+        },
+        rules: {
+            Account: [
+                { required: true, message: "请输入用户名", trigger: "blur" }
+            ],
+            Password: [
+                { required: true, message: "请输入密码", trigger: "blur" }
+            ],
+            ValidataCode: [
+                { required: true, message: "请输入右侧图片上的文字", trigger: "blur" }
+            ]
+        },
       };
     },
     created() {
@@ -254,7 +250,18 @@
         this.apipost("/api/Tenant/Login", this.msg, res => {
           console.log("res", res);
         })
-      }
+      },
+      submitForm(msg){
+        //提交创建、修改表单
+        this.$refs[msg].validate(valid => {
+            if (valid) {
+                this.login();
+            } else {
+                return false;
+            }
+        });
+      },
+
     },
     mounted() {
       if (!this.isOnline()) {

src/router/index.js

@@ -15,6 +15,11 @@ export default new Router({
       name: 'login',
       component: resolve => require(['@/components/Login'], resolve),
     },
+    {
+      path: '/Register',
+      name: 'Register',
+      component: resolve => require(['@/components/Register'], resolve),
+    },
     {
       path: '/homeIndex',
       name: 'homeIndex',