Vue 实现登录拦截（二）

本章讲解的逻辑部分的

有上一节的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的操作。