Skip to content

T
techbook
Commit 2e3b07be authored by zhangyanni's avatar zhangyanni
Browse files
Options

手机号登录的一些正则

parent c9eeb91c
Hide whitespace changes
Inline Side-by-side
Showing with 132 additions and 20 deletions
src/assets/img/login/login-bg@2x.png deleted 100755 → 0
View file @ c9eeb91c
This diff is collapsed.
src/common/validate.js 0 → 100644
View file @ 2e3b07be
export default {
//验证手机号码
checkMobile(rule, value, callback) {
var reg = /^1[3456789]\d{9}$/;
if (value === '') {
callback(new Error('请输入手机号'));
} else if (!reg.test(value)) {
callback(new Error('填写正确的手机号'));
} else {
callback();
}
},
//验证密码格式
checkPassWord(rule,value,callback){
var reg = /(?!^[0-9]+$)(?!^[A-z]+$)(?!^[^A-z0-9]+$)^.{6,18}$/;
if(value ===''){
callback(new Error('请输入密码'));
}else if(!reg.test(value)){
callback(new Error('密码格式不正确'));
}else{
callback();
}
},
//验证码
checkCode(rule,value,callback){
var reg = /^[0-9]{4,6}$/;
if(value ===''){
callback(new Error('请填写验证码'));
}else if(!reg.test(value)){
callback(new Error('请输入正确格式的验证码'));
}else{
callback();
}
},
//验证只支持数字
checkNumber(rule,value,callback){
var reg = /^[0-9]*$/;
if(value ===''){
callback(new Error('请填写手机号'));
}else if(!reg.test(value)){
callback(new Error('请输入正确格式的手机号'));
}else{
callback();
}
},
}
\ No newline at end of file
src/components/login/mobileLoginCmpt.vue
View file @ 2e3b07be
<template>
<div class="wrapper">
<p>欢迎登录TechBook</p>
<el-tabs v-model="activeName" @tab-click="handleTab">
<el-tabs v-model.trim="activeName" @tab-click="handleTab">
<el-tab-pane label="密码登录" name="first">
<el-form :model="loginForm" :rules="rules" ref="loginForm"
class="demo-loginForm">
<el-form-item prop="mobile" required>
<el-input v-model="loginForm.mobile" placeholder="请输入手机号" autocomplete></el-input>
<el-form-item prop="mobile">
<el-input v-model.trim="loginForm.mobile" placeholder="请输入手机号" autocomplete></el-input>
</el-form-item>
<el-form-item prop="pass" required style="margin-bottom: 10px !important;">
<el-input type="password" v-model="loginForm.pass" placeholder="请输入密码"
<el-form-item prop="pass" style="margin-bottom: 10px !important;">
<el-input type="password" v-model.trim="loginForm.pass" placeholder="请输入密码" maxlength="18"
autocomplete></el-input>
</el-form-item>
<el-form-item class="remumberPass">
<el-checkbox name="type" @click="handleRemumber">记住密码</el-checkbox>
<el-checkbox name="type" @click="handleRemumber" v-model="checked">记住密码</el-checkbox>
<span @click="handleForget">忘记密码?</span>
</el-form-item>
<el-form-item>
......@@ -28,10 +28,10 @@
<el-form :model="yzCodeForm" :rules="rules" ref="yzCodeForm"
class="demo-loginForm">
<el-form-item prop="mobile" required>
<el-input v-model="yzCodeForm.mobile" placeholder="请输入手机号" autocomplete></el-input>
<el-input v-model.trim="yzCodeForm.mobile" placeholder="请输入手机号" autocomplete></el-input>
</el-form-item>
<el-form-item prop="code" class="yzcodeItem">
<el-input type="text" v-model="yzCodeForm.code" placeholder="请输入验证码" style="float: left;"
<el-input type="text" v-model.trim="yzCodeForm.code" placeholder="请输入验证码" style="float: left;"
autocomplete></el-input>
<span class="getyzcodeBtn">{{codehtml}}</span>
<!--<span class="getdyzcodeBtn">{{codehtml}}</span>-->
......@@ -54,6 +54,7 @@
</template>
<script>
import validate from '../../common/validate';
export default {
name: "mobileLoginCmpt",
data() {
......@@ -61,6 +62,7 @@
activeName: "first",
codehtml: "获取验证码",
lang:window.localStorage.getItem("lang")=="zh-CN"?1:2,
checked:false,
loginForm: {
mobile: "",
pass: ""
......@@ -71,15 +73,14 @@
},
rules: {
mobile: [
{required: true, message: '请输入手机号', trigger: 'blur'},
{max: 11, message: '长度在 11 个字符', trigger: 'blur'}
{required: true, validator:validate.checkMobile, trigger: 'blur'},
],
pass:[
{required: true, message: '请输入密码', trigger: 'blur'},
{min:6,max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur'}
{required: true, validator:validate.checkPassWord, trigger: 'blur'},
{min:6,max: 18, message: '密码长度在 6 到 18 个字符', trigger: 'blur'}
],
code: [{required: true, message: '请输入验证码', trigger: 'blur'},
{max: 4, message: '长度在 4 个字符', trigger: 'blur'}]
code: [{required: true, validator:validate.checkCode, trigger: 'blur'},
{min:4,max: 6, message: '长度在 4 到 6 个字符', trigger: 'blur'}]
},
}
},
......@@ -97,8 +98,34 @@
},
//判断是否选中记住密码
isCheckedPassword(){
const self = this;
//判断复选框是否被勾选 勾选则调用配置cookie方法
if (self.checked == true) {
//传入账号名，密码，和保存天数3个参数
self.setCookie(self.loginForm.mobile, self.loginForm.pass, 7);
}else {
console.log("清空Cookie");
//清空Cookie
self.clearCookie();
}
},
//登录
handleLogin(type, form) {
handleLogin(type, formName) {
const that =this;
this.$refs[formName].validate((valid) => {
if (valid) {
if(type==1){ //1密码登录 2验证码登录
that.isCheckedPassword();
}else{
}
} else {
return false;
}
});
},
......@@ -116,10 +143,40 @@
//收不到验证码
handleRegetCode(){
},
//设置cookie
setCookie(c_name, c_pwd, exdays) {
var exdate = new Date(); //获取时间
exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
//字符串拼接cookie
window.document.cookie = "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
window.document.cookie = "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
},
//读取cookie
getCookie: function() {
if (document.cookie.length > 0) {
var arr = document.cookie.split('; '); //这里显示的格式需要切割一下自己可输出看下
for (var i = 0; i < arr.length; i++) {
var arr2 = arr[i].split('='); //再次切割
//判断查找相对应的值
if (arr2[0] == 'userName') {
this.loginForm.mobile = arr2[1]; //保存到保存数据的地方
} else if (arr2[0] == 'userPwd') {
this.loginForm.pass = arr2[1];
}
}
}
},
//清除cookie
clearCookie: function() {
this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
}
},
mounted() {
this.getCookie();
}
}
</script>
......
src/main.js
View file @ 2e3b07be
......@@ -13,9 +13,13 @@ Vue.use(Element);
Vue.config.productionTip = false;
router.beforeEach((to, from, next) => {
next();
if(to.name=='login'){
if(window.localStorage.getItem("lang")=="zh-CN") router.replace('/mobileLoginCmpt');
else router.replace('/emailLoginCmpt')
if(to.name=='login'||to.name=="mobileLoginCmpt"||to.name=="emailLoginCmpt"){
if(navigator.language=="zh-CN") router.replace('/mobileLoginCmpt');
else router.replace('/emailLoginCmpt')
}
if(to.name=="mobileRegisterCmpt"||to.name=="emailRegisterCmpt"){
if(navigator.language=="zh-CN") router.replace('/mobileRegisterCmpt');
else router.replace('/emailRegisterCmpt')
}
// if(window.localStorage.getItem("loginToken") ==null){
// if(to.name == 'forgetPass' || to.name == 'updateForgetPass' || to.name == 'updateForgetPassSuccess'){
......
src/views/loginregister/pages/login.vue
View file @ 2e3b07be
......@@ -52,7 +52,7 @@
width: 38%;
padding-top: 50px;
padding-left: 40px;
background: url("../../../assets/img/login/login-bg@2x.png") no-repeat;
background: url("../../../assets/img/login/login-bg@2x.jpg") no-repeat;
background-size: 100% auto;
text-align: left;
.logoInfo {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment