Skip to content

T
techbook
Commit 36eb6867 authored by zhangyanni's avatar zhangyanni
Browse files
Options

邮箱注册

parent 421a46d5
Hide whitespace changes
Inline Side-by-side
Showing with 43 additions and 22 deletions
public/css/common.scss
View file @ 36eb6867
......@@ -363,4 +363,8 @@ h4{
}
.el-select-dropdown__item .china{
background-position: -1049px 0;
}
//隐藏的input
.is-hidden{
position: absolute; left: -10000px; top: -10000px;
}
\ No newline at end of file
src/components/login/emailLoginCmpt.vue
View file @ 36eb6867
<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="emailForm" :rules="rulesCode" ref="emailForm"
class="demo-emailForm">
<el-form-item prop="email" required>
<el-input v-model="emailForm.email" placeholder="请输入邮箱地址" autocomplete></el-input>
<el-input v-model.trim="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="请输入密码" maxlength="18"
<el-input type="password" v-model.trim="emailForm.pass" placeholder="请输入密码" maxlength="18"
autocomplete></el-input>
</el-form-item>
<el-form-item class="remumberPass">
<el-checkbox name="type" v-model="checked">记住密码</el-checkbox>
<el-checkbox name="type" v-model.trim="checked">记住密码</el-checkbox>
<span @click="handleForgetPass">忘记密码?</span>
</el-form-item>
<el-form-item>
......@@ -28,10 +28,10 @@
<el-form :model="emailYzCodeForm" :rules="rulesCode" ref="emailYzCodeForm"
class="demo-emailForm">
<el-form-item prop="email" required>
<el-input v-model="emailYzCodeForm.email" placeholder="请输入邮箱地址" autocomplete></el-input>
<el-input v-model.trim="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;" maxlength="6"
<el-input type="text" v-model.trim="emailYzCodeForm.code" placeholder="请输入验证码" style="float: left;" maxlength="6"
autocomplete></el-input>
<!--<span class="getyzcodeBtn">{{codehtml}}</span>-->
<span class="getdyzcodeBtn">{{codehtml}}</span>
......
src/components/register/emailRegisterCmpt.vue
View file @ 36eb6867
<template>
<div class="wrapper">
<p>欢迎注册TechBook</p>
<el-tabs v-model="activeName">
<el-tabs v-model.trim="activeName">
<el-tab-pane label="邮箱注册" name="first">
<el-form :model="registerForm" :rules="rules" ref="registerForm"
class="demo-loginForm">
<el-form-item prop="mobile" required>
<el-input v-model="registerForm.email" placeholder="请输入邮箱" autocomplete></el-input>
<el-form-item prop="email" required>
<el-input v-model.trim="registerForm.email" placeholder="请输入邮箱" autocomplete></el-input>
</el-form-item>
<el-form-item prop="code" class="yzcodeItem" required>
<el-input type="text" v-model="registerForm.code" placeholder="请输入邮箱验证码" style="float: left;"
<el-input type="text" v-model.trim="registerForm.code" placeholder="请输入邮箱验证码" style="float: left;" maxlength="6"
autocomplete></el-input>
<input type="text" class="is-hidden" />
<input type="password" class="is-hidden" />
<!--<span class="getyzcodeBtn">{{codehtml}}</span>-->
<span class="getdyzcodeBtn">{{codehtml}}</span>
</el-form-item>
<el-form-item required prop="pass" class="passwordItem">
<el-input :type="!isShowPass?'password':'text'" v-model="registerForm.pass" placeholder="设置登录密码"
<el-input :type="!isShowPass?'password':'text'" v-model.trim="registerForm.pass" placeholder="设置登录密码" maxlength="18"
autocomplete></el-input>
<i :class="isShowPass?'iconfont icon-yanjing1':'iconfont icon-yanjing'" @click="isShowPass = !isShowPass"></i>
<i :class="isShowPass?'iconfont icon-yanjing':'iconfont icon-yanjing1'" @click="isShowPass = !isShowPass"></i>
</el-form-item>
<el-form-item class="agreeprotocol">
<el-checkbox name="type" v-model="checked">我已阅读并同意《<span @click="handleToProtocol" class="protocol">Techbook服务协议</span>》</el-checkbox>
<el-checkbox name="type" v-model.trim="checked">我已阅读并同意《</el-checkbox><span @click="handleToProtocol" class="protocol">Techbook服务协议</span>》
</el-form-item>
<el-form-item>
<el-button type="primary" class="loginButton" @click="handleRegister('registerForm')">注册
......@@ -36,6 +38,8 @@
</template>
<script>
import validate from '../../common/validate';
import publicFunc from '../../common/public';
export default {
name: "emailRegisterCmpt",
data() {
......@@ -52,15 +56,14 @@
isShowPass:false,
rules: {
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'}]
},
}
},
......@@ -72,8 +75,21 @@
},
//注册
handleRegister(form) {
this.$router.replace("/completeInfoCmpt")
handleRegister(formName) {
const that =this;
if(this.checked){
this.$refs[formName].validate((valid) => {
if (valid) {
that.$router.replace("/completeInfoCmpt")
} else {
return false;
}
});
}else{
this.$message.warning("请先同意服务协议");
}
},
//查看协议
......@@ -85,7 +101,6 @@
handleLogin(){
if(this.lang==1) this.$router.replace("/mobileLoginCmpt");
else this.$router.replace("/emailLoginCmpt");
}
},
mounted() {
......@@ -149,6 +164,7 @@
.protocol{
color: #7E93FF;
cursor: pointer;
font-weight: 400;
}
.agreeprotocol{
height: 30px !important;
......
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