本章讲解的逻辑部分的
有上一节的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的操作。