验证码2

src/app/admin/login/login/login.component.html

@@ -7,9 +7,9 @@
     </div>
     <div class="body-content-login">
       <div class="body-content-right-title">嗨森逛后台登录</div>
-      <form nz-form class="login-form" [formGroup]="loginForm" (ngSubmit)="submitLogin()">
+      <form nz-form [nzLayout]="'vertical'" class="login-form" [formGroup]="loginForm" (ngSubmit)="submitLogin()">
 
-        <div class="form-item">
+        <!-- <div class="form-item">
         <div class="form-item-label"><h3>用户名</h3></div>
           <div class="form-item-control">
             <input type="text"  formControlName="loginName" placeholder="请输入您的用户名">
@@ -31,10 +31,35 @@
             <app-verification-code nz-col nzSpan="10" (validate)="validateFun($event)" ></app-verification-code>
         
           </div>
-        </div>
+        </div> -->
 
+        <nz-form-item>
+          <nz-form-label  nzRequired nzFor="loginName" class="form-item-label"><h3>用户名</h3></nz-form-label>
+          <nz-form-control   nzErrorTip="请输入您的用户名!" class="form-item-control">
+            <input nz-input type="text" id="loginName"  formControlName="loginName" placeholder="请输入您的用户名" />
+          </nz-form-control>
+        </nz-form-item>
         
 
+        <nz-form-item>
+          <nz-form-label  nzFor="password" nzRequired class="form-item-label"><h3>密&nbsp;&nbsp;&nbsp;码</h3></nz-form-label>
+          <nz-form-control  nzErrorTip="请输入您的密码!" class="form-item-control">
+            <input nz-input type="password" id="password" formControlName="password" placeholder="请输入您的密码" />
+          
+          </nz-form-control>
+        </nz-form-item>
+
+        <nz-form-item>
+          <nz-form-label  nzFor="vertifyCode" nzRequired class="form-item-label"><h3>验证码</h3></nz-form-label>
+          <nz-form-control nzErrorTip="请输入验证码!" class="form-item-control">
+            <div nz-row >
+            <input  nz-col nzSpan="12" nz-input type="text" id="vertifyCode" formControlName="vertifyCode" placeholder="请输入验证码" />
+            <app-verification-code  nz-col nzSpan="12" (validate)="validateFun($event)" ></app-verification-code>
+            </div>
+          </nz-form-control>
+           
+        </nz-form-item>
+
         <!--<div class="forget-pwd">
 
           <a routerLink="/retrieveAdminPwd">忘记密码</a>

src/app/admin/login/login/login.component.less

@@ -124,6 +124,7 @@
   }
 
   .from-btn button {
+    cursor: pointer;
     margin-top: 20px;
     width: 250px;
     height: 37px;
@@ -213,7 +214,17 @@
     float: left;
   }
 
+  ::ng-deep .ant-form-item-label > label.ant-form-item-required::before{
+    display: none;
+  }
 
+  ::ng-deep  .ant-form-vertical .ant-form-item-label{
+    padding:0;
+  }
+
+  ::ng-deep .ant-form-vertical .ant-form-item{
+    margin-bottom: 15px;
+  }
   /*常规验证码*/
 
   ::ng-deep .verify-code {

src/app/admin/login/login/login.component.ts

@@ -31,7 +31,7 @@ export class LoginComponent implements OnInit {
     this.loginForm = this.form.group({
       loginName: [null, [Validators.required]],
       password: [null, [Validators.required]],
-      vertifyCode: [""]//验证码
+      vertifyCode:[null, [Validators.required]]//验证码
     });
   }
 
@@ -40,22 +40,22 @@ export class LoginComponent implements OnInit {
    */
   submitLogin() {
 
+   
+
     // tslint:disable-next-line:forin
     for (const i in this.loginForm.controls) {
       this.loginForm.controls[i].markAsDirty();
       this.loginForm.controls[i].updateValueAndValidity();
     }
     if (this.loginForm.status == null || this.loginForm.status !== 'VALID') {
-      this.modal.warning({
+      // this.modal.warning({
-        nzTitle: '提示',
+      //   nzTitle: '提示',
-        nzContent: '请填写用户和密码',
+      //   nzContent: '请填写用户和密码',
-      });
+      // });
       return;
-    }else if(this.loginForm.value.vertifyCode=="" ||this.loginForm.value.vertifyCode.toLowerCase() !== this.code ){
+    }
-      this.modal.warning({
+    if(this.loginForm.value.vertifyCode.toLowerCase() !== this.code ){
-        nzTitle: '提示',
+      this.message.error("请填写正确的验证码");
-        nzContent: '请填写正确的验证码',
-      });
       return;
     }
 
@@ -76,7 +76,7 @@ export class LoginComponent implements OnInit {
   }
 
   // 子组件验证方法
-  validateFun(str:string){
+  validateFun(str:string) {
-    this.code=str
+    this.code = str;
   }
 }

src/app/common/verification-code/verification-code.component.html

@@ -1,4 +1,4 @@
-<div id="v_container" (click)="refresh()" style="width: 100px;height: 100%;display: flex;">
+<div id="v_container" (click)="refresh()" style="width: 100%;height: 100%;display: flex;justify-content: center;">
   <canvas #verifyCanvas width="100" height="40" style="cursor: pointer;" ></canvas>
 </div>
 

src/app/common/verification-code/verification-code.component.ts

@@ -10,10 +10,7 @@ import { Component, ElementRef, ViewChild, OnInit,Output,EventEmitter } from '@a
 export class VerificationCodeComponent implements OnInit {
   @ViewChild('verifyCanvas') verifyCanvas: ElementRef;
   @Output() validate = new EventEmitter()
-  // pushList(v:string){
+ 
-  //   console.log(this.inpValue)
-  //     this.validate.emit(v)
-  // }
 
   codeLength = 4; // 设置验证码长度
   options = {