拆分校验用户名的方法

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)
+}

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'))
+      // 1. 规则对象
-      } else {
+      // 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,