密码需要数字字母特殊字符任选2种组合
const validatePwd=(rule, value, callback)=>{ const reg=/(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*?]+)$)^[\w~!@#$%^&*?]{8,32}$/ if (reg.test(value) == true ) { callback() } else { callback(new Error('密码格式错误')) } }
rules: { password: [{ required: true, message: '密码长度8-32位，请使用数字、字母、特殊字符的至少两种进行组合', trigger: 'blur',validator:validatePwd }], },
验证码，发送短信验证码，校验确认密码和密码（图片和相关接口不在，会报错，自取验证部分）
<template>
<div>
<div>
</div>
<div class="login-container">
<img class="login-bg" src="@/assets/login_images/loginBg.png" alt="loginBG"/>
<img class="login-logo" src="../../assets/login_images/BS_logo.png" alt="logo"/>
<img
class="login-bitmap"
src="../../assets/login_images/bitmap.png"
alt="bitmap"
/>
<div class="login-container-left">
<img
class="login-cardBg"
src="../../assets/login_images/login-cardBg.png"
alt="loginCardBg"
/>
</div>
<div class="login-container-right">
<el-form
:rules="rules" :model="ruleForm"
ref="ruleForm"
class="login-form"
autocomplete="on"
label-position="left"
>
<div class="title-container" v-if="pedMethod === 'code'">
<div class="title1">忘记密码</div>
<div class="title2">请通过手机短信验证码进行密码重置</div>
</div>
<div v-if="pedMethod === 'code'">
<el-form-item prop="username">
<el-input
ref="phone"
v-model="phone"
placeholder="请输入手机号"
name="phone"
type="text"
maxlength="11"
autocomplete="on"
/>
<span class="input-btns">
<span
v-if="phone"
class="show-close"
@click="clearPhone"
>
<i class="el-icon-circle-close"></i>
</span>
</span>
</el-form-item>
<el-form-item prop="SMSCaptcha ">
<el-input
v-model="SMSCaptcha"
type="text"
placeholder="请输入验证码"
name="SMSCaptcha "
autocomplete="on"
clearable
maxlength="6"
/>
<div class="getCode" v-if="!isSend" @click="sendSms">获取验证码</div>
<div class="getCode" v-if="isSend">{{ time }}</div>
</el-form-item>
<el-button
:loading="loading"
type="primary"
style="
width: 100%;
margin-bottom: 12.5%;
margin-top: 8.15%;
background: #165dff;
"
@click="nextProgess"
>
下一步
</el-button>
</div>
<div class="title-container" v-if="pedMethod === 'reset'">
<div class="title3" @click="toPre"> <返回上一步 </div>
<div class="title1">设置密码</div>
<div class="title2">当前账号{{ phone }}</div>
</div>
<div v-if="pedMethod === 'reset'">
<el-form-item prop="password">
<el-input
ref="password"
v-model="ruleForm.password"
placeholder="请设置密码"
name="password"
type="text"
autocomplete="on"
clearable
/>
</el-form-item>
<el-form-item prop="password1">
<el-input
ref="password1"
v-model="ruleForm.password1"
placeholder="确认密码"
name="password1"
type="text"
autocomplete="on"
clearable
/>
</el-form-item>
<el-button
:loading="loading"
type="primary"
style="
width: 100%;
margin-bottom: 12.5%;
margin-top: 8.15%;
background: #165dff;
"
@click="onSubmit('ruleForm')"
>
确定
</el-button>
</div>
</el-form>
</div>
</div>
</div>
</template>
<script>
import { sendSms, resetPasswordBySms } from '@/api/setting/resetPwd'
import md5 from 'md5'
export default {
name: 'Login',
data() {
const validatePsd1 = (rule, value, callback) => {
if (value == '') {
callback(new Error('请输入确认密码'))
} else if (this.ruleForm.password == '') {
callback(new Error('请先输入密码'))
this.ruleForm.password1 = ''
} else if (value != this.ruleForm.password) {
callback(new Error('确认密码与密码不一致'))
} else {
callback()
}
}
const validatePsd = (rule, value, callback) => {
const reg=/(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*?]+)$)^[\w~!@#$%^&*?]{8,20}$/
if (reg.test(value) == true ) {
if (value == '') {
callback(new Error('请输入密码'))
} else if (this.ruleForm.password == '') {
callback(new Error('请输入密码'))
} else if (value.length < 8 || value.length > 32) {
callback(new Error('密码不少于8位，不大于32位'))
} else {
callback()
}
} else {
callback(new Error('密码长度8-32位，请使用数字、字母、特殊字符的至少两种进行组合'))
}
}
return {
loading: false,
ruleForm: {
password: '',
password1: ''
},
rules: {
password: [{ required: true, validator: validatePsd, trigger: 'blur' }],
password1: [{ required: true, validator: validatePsd1, trigger: 'blur' }]
},
pedMethod: 'code',
isSend: false,
time: 180,
phone: '',
SMSCaptcha: ''
}
},
watch: {},
methods: {
clearPhone() {
this.phone = ''
},
clearUsername() {
this.loginForm.username = ''
},
toPre(){
this.pedMethod = 'code'
},
nextProgess() {
if (!this.phone) {
this.$message({
message: '请输入手机号',
type: 'warning'
})
return
}
if (!this.checkMobile(this.phone)) {
this.$message({
message: '手机号输入错误',
type: 'warning'
})
return
}
if (!this.SMSCaptcha) {
this.$message({
message: '请输入验证码',
type: 'warning'
})
return
}
this.pedMethod = 'reset'
},
checkMobile(mobile = '') {
return /^1[3-9][0-9]{9}$/.test(mobile)
},
sendSms() {
let _this = this
try {
if (!this.phone) {
_this.$message({
message: '请输入手机号',
type: 'warning'
})
return
}
if (!this.checkMobile(this.phone)) {
_this.$message({
message: '手机号输入错误',
type: 'warning'
})
return
}
sendSms({
SMStype: 283,
terminalType: 4,
phone: this.phone
})
.then(res => {
if (res.code == 200) {
_this.countdown(_this)
}
})
.catch(err => {
})
} catch (err) {
}
},
countdown(that) {
var second = that.time
if (second == 0) {
that.isSend = false,
that.time = 180
return
}
that.isSend = true
var time = setTimeout(function() {
that.time = second - 1
that.countdown(that)
}, 1000)
},
savePasswordBySms() {
this.loading = true
resetPasswordBySms({
SMStype: 283,
terminalType: 4,
phone: this.phone,
SMSCaptcha: this.SMSCaptcha,
newPassword: this.ruleForm.password,
confirmPassword: this.ruleForm.password1
})
.then(res => {
if (res.code == 200) {
_this.countdown(_this)
}
this.loading = false
})
.catch(err => {
this.loading = false
})
},
onSubmit(formName) {
let _this = this
this.$refs[formName].validate(valid => {
if (this.ruleForm.password1 == this.ruleForm.password) {
if (valid) {
_this.savePasswordBySms()
}
} else {
console.log(this.ruleForm.password)
console.log(this.ruleForm.password1)
this.$message({
message: '密码与确认密码不一致！',
type: 'warning'
})
}
})
}
},
created() {
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
$bg: #f4f6f8;
$light_gray: #070707;
$loginCursorColor: #1F2329;
$lightGray: #1F2329;
$darkGray: #E7F0FE;
$loginBg: #2d3a4b;
.login-container {
.el-input {
display: inline-block;
height: 40px;
width: 100%;
input {
height: 40px;
// background: transparent;
background-color: #F0F5FE;
opacity: 1;
border: 0px;
border-radius: 0px;
padding-right: 78px;
color: $lightGray;
caret-color: $loginCursorColor;
-webkit-appearance: none;
font-size: 14px;
&:-webkit-autofill {
// box-shadow: 0 0 0px 1000px $loginBg inset !important;
// -webkit-text-fill-color: #fff !important;
}
&:focus {
border: 1px solid #165dff;
}
}
}
:v-deep.el-form-item {
border: 1px solid #dee0e3;
// background: rgba(0, 0, 0, 0.1);
border-radius: 5px;
color: #1f2329;
}
::v-deep.el-form-item__error {
position: absolute !important;
}
}
/* reset element-ui css */
.login-container {
::v-deep.el-input {
display: inline-block;
height: 47px;
width: 76%;
input {
background: transparent;
border: 0px;
-webkit-appearance: none;
border-radius: 0px;
padding: 12px 5px 12px 0;
color: $light_gray;
height: 47px;
&:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
-webkit-text-fill-color: #070707 !important;
}
}
}
.el-form-item {
border: 1px solid #f4f6f8;
background: #f4f6f8;
border-radius: 5px;
color: #070707;
}
}
.login-container {
position: absolute;
height: 100%;
width: 100%;
overflow: hidden;
background-color: $loginBg;
background: linear-gradient(360deg, #f3f8ff 0%, #eaf3ff 100%);
.login-container-left {
z-index: 2;
width: 37%;
height: 58.06%;
position: absolute;
top: 22.41%;
bottom: 19.54%;
left: 12.19%;
// overflow: hidden;
.login-cardBg {
width: 100%;
height: auto;
}
}
.login-container-right {
z-index: 2;
position: absolute;
top: 22.59%;
height: auto;
// min-height: 54.81%;
// max-height: 100%;
// bottom: 22.59%;
left: 52.6%;
width: 27.08%;
background: linear-gradient(
221deg,
rgba(251, 252, 253, 0.4) 0%,
rgba(255, 255, 255, 0.7) 100%
);
box-shadow: 5px 6px 23px 0px rgba(133, 168, 211, 0.16);
border-radius: 12px;
border: 2px solid #ffffff;
.login-form {
position: relative;
width: 100%;
max-width: 100%;
padding: 11.49% 11.92% 0;
margin: 0 auto;
overflow: hidden;
}
}
.svg-container {
padding: 6px 5px 6px 15px;
// color: $darkGray;
vertical-align: middle;
width: 30px;
display: inline-block;
}
.title-container {
position: relative;
.title {
font-size: 24px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600;
color: #1f2329;
line-height: 36px;
}
.title1 {
font-size: 20px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600;
color: #1f2329;
line-height: 30px;
margin: 0 0 0 0;
}
.title2 {
font-size: 12px;
font-family: PingFangSC-Medium, PingFang SC;
color: #1f2329;
line-height: 30px;
margin: 0 0 8.44% 0;
}
}
.input-btns {
position: absolute;
right: 10px;
top: 0;
z-index: 3;
}
.show-pwd {
// position: absolute;
// right: 40px;
// top: 0;
margin-right: 8px;
font-size: 16px;
color: #bbbfc4;
cursor: pointer;
user-select: none;
}
.show-close {
// position: absolute;
// right: 10px;
// top: 0;
font-size: 16px;
color: #bbbfc4;
cursor: pointer;
user-select: none;
}
}
.login-bg {
display: block;
position: fixed;
width: 101%;
height: 101%;
// background: #0e1d30;
background: #F3F6F9;
left: -5px;
top: -5px;
z-index: 1;
}
.login-logo {
width: 24%;
position: absolute;
left: 0px;
top: 0;
z-index: 2;
}
.login-bitmap {
width: 20.57%;
position: absolute;
right: 129px;
top: 66px;
z-index: 2;
}
.el-form-item__content {
line-height: 40px;
position: relative;
font-size: 14px;
padding: 0 15px;
}
.login-container .el-input {
padding: 0 15px !important;
width: 100% !important;
}
.getCode {
position: absolute;
right: 10px;
top: 0;
z-index: 3;
cursor: pointer;
color: #165DFF;
font-family: PingFangSC-Medium, PingFang SC;
}
.title3{
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600;
color: #165DFF;
line-height: 30px;
margin: 0 0 4% 0;
cursor: pointer;
}
</style>