Skip to content

T
techbook
Commit 421a46d5 authored by zhangyanni's avatar zhangyanni
Browse files
Options

登录的一些正则 

记住密码
parent 2e3b07be
Hide whitespace changes
Inline Side-by-side
Showing with 93 additions and 32 deletions
src/common/public.js
View file @ 421a46d5
......@@ -94,5 +94,19 @@ export default {
return year+"-"+month+"-"+date+" "+"23"+":"+"59"+":"+"59";
},
//设置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
clearCookie: function() {
this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
}
}
\ No newline at end of file
src/common/validate.js
View file @ 421a46d5
......@@ -5,7 +5,7 @@ export default {
if (value === '') {
callback(new Error('请输入手机号'));
} else if (!reg.test(value)) {
callback(new Error('填写正确的手机号'));
callback(new Error('请填写正确的手机号'));
} else {
callback();
}
......@@ -27,7 +27,7 @@ export default {
checkCode(rule,value,callback){
var reg = /^[0-9]{4,6}$/;
if(value ===''){
callback(new Error('请填写验证码'));
callback(new Error('请输入验证码'));
}else if(!reg.test(value)){
callback(new Error('请输入正确格式的验证码'));
}else{
......@@ -35,6 +35,18 @@ export default {
}
},
//验证邮箱
checkEmail(rule,value,callback){
var reg = /^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/;
if(value===''){
callback(new Error('请输入邮箱'));
}else if(!reg.test(value)){
callback(new Error('请输入正确格式的邮箱'));
}else{
callback();
}
},
//验证只支持数字
checkNumber(rule,value,callback){
var reg = /^[0-9]*$/;
......
src/components/login/emailLoginCmpt.vue
View file @ 421a46d5
......@@ -4,16 +4,16 @@
<el-tabs v-model="activeName" @tab-click="handleTab">
<el-tab-pane label="密码登录" name="first">
<el-form :model="emailForm" :rules="rulesCode" ref="emailForm"
class="demo-loginForm">
class="demo-emailForm">
<el-form-item prop="email" required>
<el-input v-model="emailForm.email" placeholder="请输入邮箱地址" autocomplete></el-input>
</el-form-item>
<el-form-item prop="pass" style="margin-bottom: 10px !important;">
<el-input type="password" v-model="emailForm.pass" placeholder="请输入密码"
<el-input type="password" v-model="emailForm.pass" placeholder="请输入密码" maxlength="18"
autocomplete></el-input>
</el-form-item>
<el-form-item class="remumberPass">
<el-checkbox name="type">记住密码</el-checkbox>
<el-checkbox name="type" v-model="checked">记住密码</el-checkbox>
<span @click="handleForgetPass">忘记密码?</span>
</el-form-item>
<el-form-item>
......@@ -26,12 +26,12 @@
</el-tab-pane>
<el-tab-pane label="验证码登录" name="second">
<el-form :model="emailYzCodeForm" :rules="rulesCode" ref="emailYzCodeForm"
class="demo-loginForm">
class="demo-emailForm">
<el-form-item prop="email" required>
<el-input v-model="emailYzCodeForm.email" placeholder="请输入邮箱地址" autocomplete></el-input>
</el-form-item>
<el-form-item prop="code" class="yzcodeItem" style="margin-bottom: 30px !important;">
<el-input type="text" v-model="emailYzCodeForm.code" placeholder="请输入验证码" style="float: left;"
<el-input type="text" v-model="emailYzCodeForm.code" placeholder="请输入验证码" style="float: left;" maxlength="6"
autocomplete></el-input>
<!--<span class="getyzcodeBtn">{{codehtml}}</span>-->
<span class="getdyzcodeBtn">{{codehtml}}</span>
......@@ -53,6 +53,8 @@
</template>
<script>
import validate from '../../common/validate';
import publicFunc from '../../common/public';
export default {
name: "emailLoginCmpt",
data() {
......@@ -60,6 +62,7 @@
activeName: "first",
codehtml: "获取验证码",
lang:window.localStorage.getItem("lang")=="zh-CN"?1:2,
checked:false,
emailForm: {
email: "",
pass: ""
......@@ -70,15 +73,14 @@
},
rulesCode: {
email: [
{required: true, message: '请输入邮箱地址', trigger: 'blur'},
{max: 11, message: '长度在 11 个字符', trigger: 'blur'}
{required: true, validator:validate.checkEmail, 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'}]
}
}
},
......@@ -101,12 +103,55 @@
this.$router.replace("/findPasswordCmpt")
},
//判断是否选中记住密码
isCheckedPassword(){
const self = this;
//判断复选框是否被勾选 勾选则调用配置cookie方法
if (self.checked == true) {
//传入账号名，密码，和保存天数3个参数
publicFunc.setCookie(self.emailForm.mobile, self.emailForm.pass, 7);
}else {
console.log("清空Cookie");
//清空Cookie
publicFunc.clearCookie();
}
},
//登录
handleLogin(){
handleLogin(type,formName){
const that =this;
this.$refs[formName].validate((valid) => {
if (valid) {
if(type==1){ //1密码登录 2验证码登录
that.isCheckedPassword();
}else{
}
}
} else {
return false;
}
});
},
//读取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.emailForm.email = arr2[1]; //保存到保存数据的地方
} else if (arr2[0] == 'userPwd') {
this.emailForm.pass = arr2[1];
}
}
}
},
},
mounted(){
this.getCookie();
}
}
</script>
......@@ -137,12 +182,12 @@
}
}
.loginButton,.loginButton:hover {
.loginButton{
width: 320px;
height: 40px;
background: #5D78FF;
}
.loginButton:hover{
.loginButton:hover,.loginButton:focus{
background:rgba(93,120,255,.9);
}
......
src/components/login/mobileLoginCmpt.vue
View file @ 421a46d5
......@@ -31,7 +31,7 @@
<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.trim="yzCodeForm.code" placeholder="请输入验证码" style="float: left;"
<el-input type="text" v-model.trim="yzCodeForm.code" placeholder="请输入验证码" style="float: left;" maxlength="6"
autocomplete></el-input>
<span class="getyzcodeBtn">{{codehtml}}</span>
<!--<span class="getdyzcodeBtn">{{codehtml}}</span>-->
......@@ -55,6 +55,7 @@
<script>
import validate from '../../common/validate';
import publicFunc from '../../common/public';
export default {
name: "mobileLoginCmpt",
data() {
......@@ -104,11 +105,11 @@
//判断复选框是否被勾选 勾选则调用配置cookie方法
if (self.checked == true) {
//传入账号名，密码，和保存天数3个参数
self.setCookie(self.loginForm.mobile, self.loginForm.pass, 7);
publicFunc.setCookie(self.loginForm.mobile, self.loginForm.pass, 7);
}else {
console.log("清空Cookie");
//清空Cookie
self.clearCookie();
publicFunc.clearCookie();
}
},
......@@ -145,14 +146,6 @@
},
//设置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) {
......@@ -168,10 +161,6 @@
}
}
},
//清除cookie
clearCookie: function() {
this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
}
},
......
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