本章講解的邏輯部分的

有上一節的login.vue的元件可知。這裡我們就要涉及表單的驗證，為此寫了個方法來驗證表單的正確性

1.編寫validation.js的檔案

/*
 validation 1.x
 */
var validation = {
  checkPhone: checkPhone,
  isEmpty: isEmpty,
};

function checkPhone(num) {
  //表示以1開頭，第二位可能是3/4/5/7/8等的任意一個，在加上後面的\d表示數字[0-9]的9位，總共加起來11位結束。
  if (!(/^1[3|4|5|7|8]\d{9}$/.test(num))) {
    return
 
 false;
  } else {
    return true;
  }
};

function isEmpty(str) {
  str = str || ''
  if (/^\s*$/.test(str)) {
    return true;
  } else {
    return false;
  }
};

export default validation;

2.先下載mint-ui的UI庫

npm i mint-ui -D

修改main.js的檔案 npm的介紹

import MintUI from 'mint-ui';
import 'mint-ui/lib/style.css'
 
;
Vue.use(MintUI);

這裡先這樣操作是為了下面的表單的驗證方便。

3.回到 login.vue

• 引入的validation.js

import validation from '../assets/script/validation'

當我們點選登入的操作時候，我們要進行先驗證表單，操作如下

• 引入儲存資訊store的外掛

 import store from 'store'

-引入的mint-ui的方法

import { MessageBox } from 'mint-ui';

methods 執行這樣fn

 Validate(formData){  //封裝表單驗證的方法
 

   if (validation.isEmpty(formData.name)) {
      MessageBox.alert('請輸入姓名')  
      return false //阻止 跳出去
    } else if (validation.isEmpty(formData.phone)) {
      MessageBox.alert('請輸入您的手機號')
      return false
    } else if (!validation.checkPhone(formData.phone)) {
      MessageBox.alert('您的手機號格式有誤')
      return false
    } else {
      return true
    }
  },
  loginHandler(formData){
    if (this.Validate(formData)) { //呼叫封裝的validation的方法
      store.set('zhooson_login_token', formData) //儲存資訊
       let redirect = decodeURIComponent(this.$route.query.redirect || '/'); //url 轉碼
       MessageBox.alert('登入成功').then(() => { //promise的物件
        this.$router.push({
            path: redirect,
          });
      })
    }
  }

下一章節講解router的操作。