From 6a5776819f96b9c512b6a9c98936656610552a63 Mon Sep 17 00:00:00 2001
From: zhangyiming <zhangyiming@tiamaes.com>
Date: Fri, 4 Dec 2020 18:33:45 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=A0=A1=E9=AA=8C=E8=A7=84?=
 =?UTF-8?q?=E5=88=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/info.vue | 32 ++++++++++++++++++++++++++++----
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/components/info.vue b/src/components/info.vue
index c265bc00f..5ff804cb3 100644
--- a/src/components/info.vue
+++ b/src/components/info.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="info">
-    <el-form :model="ruleForm" ref="ruleForm" class="rule-form">
+    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="rule-form">
       <el-form-item prop="userName">
         <el-input
           clearable
@@ -12,6 +12,7 @@
       <el-form-item prop="passWord">
         <el-input
           clearable
+          type="password"
           v-model="ruleForm.passWord"
           placeholder="请输入密码"
           prefix-icon="el-icon-lock"
@@ -19,7 +20,10 @@
       </el-form-item>
       <el-form-item prop="verify">
         <el-input
-          v-model="ruleForm.verify"
+          maxlength="2"
+          show-word-limit
+          onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"
+          v-model.number="ruleForm.verify"
           placeholder="请输入验证码"
         ></el-input>
         <span
@@ -39,6 +43,7 @@
 
 <script lang='ts'>
 import {
+  ref,
   defineComponent,
   PropType,
   onBeforeMount,
@@ -65,25 +70,44 @@ export default defineComponent({
   setup(props, ctx) {
     let vm: any;
 
+    const rules: Object = ref({
+      userName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
+      passWord: [
+        { required: true, message: "请输入密码", trigger: "blur" },
+        { min: 6, message: "密码长度必须不小于6位", trigger: "blur" },
+      ],
+      verify: [
+        { required: true, message: "请输入验证码", trigger: "blur" },
+        { type: "number", message: "验证码必须是数字类型", trigger: "blur" },
+      ],
+    });
+
     onBeforeMount(() => {
       vm = getCurrentInstance(); //获取组件实例
     });
 
     // 点击登录
     const onLogin = (evt: Object): void => {
-      ctx.emit("onLogin", evt);
+      vm.refs.ruleForm.validate((valid: Boolean) => {
+        if (valid) {
+          ctx.emit("onLogin", evt);
+        } else {
+          return false;
+        }
+      });
     };
 
     // 刷新验证码
     const refreshVerify = (): void => {
       ctx.emit("refreshVerify");
     };
+
     // 表单重置
     const resetForm = (): void => {
       vm.refs.ruleForm.resetFields();
     };
 
-    return { resetForm, onLogin, refreshVerify };
+    return { rules, resetForm, onLogin, refreshVerify };
   },
 });
 </script>