Skip to content

Commit

Permalink
2020/4/24 12:57
Browse files Browse the repository at this point in the history
  • Loading branch information
wantao666 committed Apr 24, 2020
1 parent 72950a7 commit 212d7cb
Show file tree
Hide file tree
Showing 3 changed files with 259 additions and 0 deletions.
124 changes: 124 additions & 0 deletions components/register/passwordStronger.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
<template>
<div id="container">
<el-row>
<el-col :span="6" :offset="1">
<el-progress :percentage="onePercentage" :color="oneCustomColors" :format="oneFormat" :stroke-width="3"></el-progress>
</el-col>
<el-col :span="6" :offset="1">
<el-progress :percentage="twoPercentage" :color="twoCustomColors" :format="twoFormat" :stroke-width="3"></el-progress>
</el-col>
<el-col :span="6" :offset="1">
<el-progress :percentage="ThreePercentage" :color="ThreeCustomColors" :format="ThreeFormat" :stroke-width="3"></el-progress>
</el-col>
<el-col :span="2" :offset="1" style="line-height: 15px;">
{{content}}
</el-col>
</el-row>
</div>
</template>

<script>
export default {
name: "PasswordStronger",
model: {
event: 'change',
prop: 'password'
},
props: {
//密码
password: {
type: [String,Boolean,Number,Object],
required: true,
default: "",
},
},
watch:{
password(newValue){
const mode = this.checkPasswordStrength(newValue);
//逻辑处理
switch (mode) {
  //初始化状态
case 0:
this.content = '';
this.onePercentage = 0;
this.twoPercentage = 0;
this.ThreePercentage = 0;
break;
case 1:
this.content = '弱';
this.onePercentage = 100;
this.twoPercentage = 0;
this.ThreePercentage = 0;
break;
case 2:
this.content = '中';
this.onePercentage = 100;
this.twoPercentage = 100;
this.ThreePercentage = 0;
break;
case 3:
this.content = '中';
this.onePercentage = 100;
this.twoPercentage = 100;
this.ThreePercentage = 0;
break;
default:
this.content = '高';
this.onePercentage = 100;
this.twoPercentage = 100;
this.ThreePercentage = 100;
break;
}
}
},
data(){
return{
content:"",
onePercentage:0,
twoPercentage:0,
ThreePercentage:0,
oneCustomColors: [
{color: '#f56c6c', percentage: 100}
],
twoCustomColors: [
{color: '#e6a23c', percentage: 100}
],
ThreeCustomColors: [
{color: '#67c23a', percentage: 100}
]
}
},
methods:{
oneFormat() {
return "";
},
twoFormat() {
return "";
},
ThreeFormat() {
return "";
},
//密码强度验证
checkPasswordStrength(value) {
let mode = 0;
//正则表达式验证符合要求的
if (value.length < 1) return mode;
if (/\d/.test(value)) mode++; //数字
if (/[a-z]/.test(value)) mode++; //小写
if (/[A-Z]/.test(value)) mode++; //大写
if (/\W/.test(value)) mode++; //特殊字符
return mode;
}
}
}
</script>

<style>
.el-progress__text {
display: none;
}
.el-progress-bar {
padding-right: 0px;
margin: 0px;
}
</style>
15 changes: 15 additions & 0 deletions layouts/blank.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<template>
<div>
<nuxt></nuxt>
</div>
</template>

<script>
export default {
}
</script>

<style>
</style>
120 changes: 120 additions & 0 deletions pages/register.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
<template>
<div>
<el-container>
<el-header>
<div style="height:60px;width:100%;background-color:#f8f8f8">
<el-row>
<el-col :span="2" :offset="5">
<el-image src="//s0.meituan.net/bs/fe-web-meituan/fa5f0f0/img/logo.png"></el-image>
</el-col>
<el-col :span="5" :offset="7">
<p style="margin-top:10px;">
已有美团账号?
<el-button type="warning" size="small">登录</el-button>
</p>
</el-col>
</el-row>
</div>
</el-header>
<el-main>
<div style="width:500px;margin:0 auto;">
<el-form :model="registerForm" :rules="rules" label-width="90px">
<el-form-item label="昵称" :prop="registerForm.nickname">
<el-input v-model="registerForm.nickname"></el-input>
</el-form-item>
<el-form-item label="邮箱" :prop="registerForm.email">
<el-input v-model="registerForm.email"></el-input>
<el-button type="info" style="margin-top:10px;">获取邮箱验证码</el-button>
<span>{{statusMsg}}</span>
</el-form-item>
<el-form-item label="邮箱验证码" :prop="registerForm.emailCode">
<el-input v-model="registerForm.emailCode"></el-input>
</el-form-item>
<el-form-item label="创建密码" :prop="registerForm.password">
<el-input v-model="registerForm.password"></el-input>
</el-form-item>
<el-form-item>
<password-stronger v-model="registerForm.password" style="padding-top: 10px;"></password-stronger>
</el-form-item>
<el-form-item label="确认密码" :prop="registerForm.password1">
<el-input v-model="registerForm.password1"></el-input>
</el-form-item>
<el-form-item>
<el-button type="warning">注册</el-button>
</el-form-item>
</el-form>
</div>
</el-main>
<el-footer>
<hr />
</el-footer>
</el-container>
</div>
</template>

<script>
import Blank from "../layouts/blank";
import PasswordStronger from "../components/register/passwordStronger";
export default {
components: {
PasswordStronger
},
//在page中通过layout指定布局,如果不指定布局，则使用default.vue
layout: "blank",
data() {
return {
statusMsg: "",
registerForm: {
nickname: "",
email: "",
emailCode: "",
password: "",
password1: ""
},
rules: {
nickname: [
{
required: true,
type: "string",
message: "请输入昵称",
trigger: "blur"
}
],
email: [
{
required: true,
type: "email",
message: "请输入邮箱",
trigger: "blur"
}
],
password: [
{
required: true,
type: "password",
message: "创建密码",
trigger: "blur"
}
],
passowrd1: [
{ required: true, message: "确认密码", trigger: "blur" },
{
validator: (rule, value, cb) => {
if (value == "") {
cb(new Error("密码不能为空"));
} else if (value != this.registerForm.password) {
cb(new Error("两次密码输入不一致"));
} else {
cb();
}
}
}
]
}
};
}
};
</script>

<style>
</style>

0 comments on commit 212d7cb

Please sign in to comment.