From ad539e91ed599a737b77d69370aa364ae7bf1062 Mon Sep 17 00:00:00 2001
From: "jqtmviyu@gmail.com" <jqtmviyu@gmail.com>
Date: Wed, 13 Jan 2021 16:54:44 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8B=86=E5=88=86=E6=A0=A1=E9=AA=8C=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E5=90=8D=E7=9A=84=E6=96=B9=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/validate.js     |  7 +++++++
 src/views/login/index.vue | 22 +++++++++++++++++-----
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/utils/validate.js b/src/utils/validate.js
index 8d962ad..dd9c2fd 100644
--- a/src/utils/validate.js
+++ b/src/utils/validate.js
@@ -18,3 +18,10 @@ export function validUsername(str) {
   const valid_map = ['admin', 'editor']
   return valid_map.indexOf(str.trim()) >= 0
 }
+
+// valid 有效的
+// 校验通过返回true
+export function validMobile(str) {
+  const pattern = /^1[3-9]\d{9}$/
+  return pattern.test(str)
+}
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index cffd13c..bfb910b 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -56,16 +56,23 @@
 </template>
 
 <script>
-import { validUsername } from '@/utils/validate'
+import { validMobile } from '@/utils/validate'
 
 export default {
   name: 'Login',
   data() {
     const validateUsername = (rule, value, callback) => {
-      if (!validUsername(value)) {
-        callback(new Error('Please enter the correct user name'))
-      } else {
+      // 可以自定义校验函数, 每个校验函数都能收到三个参数
+      // 1. 规则对象
+      // 2. 当前输入值
+      // 3. 放行的回调函数
+      // 校验过后有两种可能,
+      // 1. 成功 直接调用 callback()
+      // 2. 失败 创建一个错误对象(js 内置对象) new Error(提示语) 传入 callback
+      if (validMobile(value)) {
         callback()
+      } else {
+        callback(new Error('请输入合法手机号'))
       }
     }
     const validatePassword = (rule, value, callback) => {
@@ -81,7 +88,12 @@ export default {
         password: '123456'
       },
       loginRules: {
-        mobile: [{ required: true, trigger: 'blur', validator: validateUsername }],
+        mobile: [
+          // { required: true, trigger: 'blur', validator: validateUsername }
+          // 通过函数的形式进行自定义校验
+          { required: true, trigger: 'blur', message: '手机号不能为空' },
+          { validator: validateUsername, trigger: 'blur' }
+        ],
         password: [{ required: true, trigger: 'blur', validator: validatePassword }]
       },
       loading: false,