Vue 實現登入攔截(二)
阿新 • • 發佈:2019-02-16
本章講解的邏輯部分的
有上一節的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的操作。