- 1手机号验证,验证码,密码, 话不多说上代码
js
// 手机号验证规则
const validatePhon = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入绑定的手机号码'))
} else if (!/^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/.test(value)) {
callback(new Error("请输入正确的手机号码"))
} else {
callback()
}
}
// 验证码
const validateCode = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入验证码!'))
} else if (!/^[0-9]+$/.test(value) || !/^\d{6}$/.test(value)) {
callback(new Error("请输入6位数字的验证码"))
}
callback()
}
//密码
const validatePass = (rule, value, callback) => {
var reg =/^(?=.*[a-z])(?=.*\d)[^]{8,16}$/; //密码必须是8位以上、必须含有字母、数字
if (value === '') {
console.log(getListpass.confirmpass, "jdjsd")
callback(new Error('请输入密码!'))
} else if (!reg.test(value)) {
callback(new Error("验证 8-18位字符密码由字母和数字组合"))
}
callback()
}
//新密码
const confirmPass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入新密码'))
} else if (value != getListpass.confirmpass) {
callback(new Error("两次密码不一致,请重新输入"))
}
callback()
}
const rules = reactive({
phone: [{ validator: validatePhon, trigger: 'blur', },
{ pattern: /^[1][3,4,5,7,8,9][0-9]{9}$/, message: '请输入正确的手机号', trigger: 'blur' }],
code: [{ validator: validateCode, trigger: 'blur', required: true }],
password: [{ validator: validatePass, trigger: 'blur', required: true }],
confirmpass: [{ validator: confirmPass, trigger: 'blur', required: true }]
})
// 提交按钮
const SubmitFun = (formEl) => {
let obj = { "tel": getListpass.phone, "smsCode": getListpass.code, "passwd": getListpass.password }
if (!formEl) return
formEl.validate((valid, fields) => {
formEl.clearValidate('phone', 'code')
if (valid) {
openLoading();
service.post('/zwow_web/callComponent/yl.userRePwdBySms/doRePwd', obj).then(res => {
closeLoading()
if (res.data.code == "0") {
// 显示修改成功
showSucceed.value = true
if (active.value++ > 2) active.value = 0
console.log(res, "成功")
} else {
ElMessage.error(res.data.msg)
}
}).catch(err => {
ElMessage.error(res.data.msg)
console.log(err)
})
} else {
return false
}
})
}
- html代码
<template>
<div class="container">
<div class="slideShadow" v-if="showSlide">
<ImgChecks @success="success" @fail="fail"></ImgChecks>
</div>
<div class="forgetpass">
<div class="forgetpass-box">
<h4>找回密码</h4>
<div class="PaddStep">
<div class="theSteps">
<el-steps :active="active" finish-status="success">
<el-step title="验证账号" />
<el-step title="重置密码" />
<el-step title="重新登录" />
</el-steps>
</div>
<div class="formPhon" v-if="!showSucceed">
<el-form ref="ruleFormRef" :size="size" :rules="rules" :model="getListpass" label-width="auto"
class="demo-ruleForm">
<el-form-item label="+86 |" class="last-phon" v-if="!getshowPass" prop="phone">
<!-- <span class="last-phon">+86</span> -->
<el-input v-model="getListpass.phone" type="text" placeholder="请输入手机号"
class="input-border-style style-phon" />
</el-form-item>
<el-form-item label="您的手机号" v-if="getshowPass">
<p class="not-phone">{{ getListpass.phone }}</p>
</el-form-item>
<el-form-item label="验证码" v-if="getshowPass" prop="code">
<el-input v-model="getListpass.code" type="text" placeholder="请输入验证码" class="input-border-style" />
<div class="code">
<span class="get-code" v-if="!sendMsgDisabled" @click="getCodes">获取验证码</span>
<span class="get-code" v-if="sendMsgDisabled">{{ time + '秒后获取' }}</span>
</div>
</el-form-item>
<el-form-item label="新密码" v-if="getshowPass" prop="password">
<el-input v-model="getListpass.password" type="password" show-password
placeholder="新密码(8~18位字符,密码由字母+数字组合)" class="input-border-style" autocomplete="off" />
</el-form-item>
<el-form-item label="确认密码" v-if="getshowPass" prop="confirmpass">
<el-input v-model="getListpass.confirmpass" type="password" show-password placeholder="请再次确认密码"
class="input-border-style" />
</el-form-item>
<el-form-item v-if="getshowPass">
<el-button type="primary" @click="SubmitFun(ruleFormRef)" class="submit">提交</el-button>
</el-form-item>
<el-form-item v-if="!getshowPass">
<el-button type="primary" @click="next(ruleFormRef)" class="next">下一步</el-button>
</el-form-item>
</el-form>
</div>
<!-- 找回密码第三步 -->
<div class="retrieve" v-if="showSucceed">
<div class="succeed-pic">
<img src="../../../assets/login/succeedpic.png" alt="成功">
</div>
<div class="succeed-text">恭喜你重新设置成功</div>
<div class="succeed-but">
<router-link to="/homelogin/Login">重新登录</router-link>
</div>
</div>
</div>
</div>
</div>
</div>
</template>