平时太忙了，很少有时间整理一下技术文章，自己做的一套登录、注册这块的验证，和大家分享一下：
整个页面是长这个样子的
normal
错误验证的页面显示
error
正确的页面显示
success
用户名（若自定义只需要修改正则即可）：
<input type="text" name="YourName" v-model="username" :class="{ 'nameshowError': nameShow}" @blur.stop="enterName(username)" ref="nameValues" placeholder="用户名" autocomplete="off">
<p class='Tel-error' v-show="nameShow">用户名在4~16个字符之间(可包含中文,数字,字母和下划线)</p>
验证方法 ↓↓↓
enterName () {
var entername = this.$refs.nameValues.value
var reName = /^[\u4e00-\u9fa5\w]{4,16}$/
if (reName.test(entername)) {
this.nameShow = false
} else {
this.nameShow = true
}
}
手机号
<input type="tel" name="YourTel" class="reg-tel" v-model="Tel" @blur.stop="enterTel(Tel)" :class="{ 'telshowError': telShow}" ref="TelValues" placeholder="请输入11位中国大陆手机号码" autocomplete="off">
<p class='Tel-error' v-show="telShow">请输入正确的手机号码</p>
验证方法 ↓↓↓
enterTel () {
var phone = this.$refs.TelValues.value
var reTel = /^1[34578]\d{9}$/
if (reTel.test(phone)) {
this.telShow = false
} else {
this.telShow = true
}
}
获取验证码
<div class="reg-getCode-content">
<input type="text" name="YourCode" class="reg-code" :class="{ 'codeshowError': isShow}" v-model='codes' ref="codeValues" placeholder="请输入验证码" autocomplete="off">
<input type="button" name="YourGetCode" class="reg-get-code" @click.stop="getRegistCode" value="获取验证码" v-show="timeshow">
<span v-show="!timeshow" class="count">{{count}}</span>
</div>
<p class='Code-error' v-show="codeShow" v-model='codes'>请输入正确的验证码</p>
验证方法（30s） ↓↓↓
getRegistCode () {
var that = this
var Tel = that.Tel
var codes = that.codes
const TIME_COUNT = 30
var reTel = /^1[34578]\d{9}$/
if (reTel.test(Tel)) {
if (!this.timer) {
this.count = TIME_COUNT
this.timeshow = false
this.timer = setInterval(() => {
if (this.count > 0 && this.count <= TIME_COUNT) {
this.count--
} else {
this.timeshow = true
clearInterval(this.timer)
this.timer = null
}
}, 1000)
}
accountApi.getCodes({
phone: Tel,
code: codes
}, (rsp) => {
if (rsp.status === 200) {
alert('发送成功')
}
})
}
}
邮箱
<input type="email" name="YourEmail" class="reg-email" @blur.stop="enterEmail(emails)" :class="{ 'emailshowError': emailShow}" v-model="emails" ref="emailValue" placeholder="邮箱" autocomplete="off">
<p class="Email-error" v-show="emailShow">请输入正确的邮箱格式</p>
验证方法 ↓↓↓
enterEmail () {
var enterEmail = this.$refs.emailValue.value
var reEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
if (reEmail.test(enterEmail)) {
this.emailShow = false
} else {
this.emailShow = true
}
}
设置密码&重复密码
<input type="password" name="YourPsd" class="reg-psd" v-model="passwords" @blur.stop="enterPsd(passwords)" :class="{ 'psdshowError': psdShow}" ref="PsdValues" placeholder="请输入8-20位密码" autocomplete="off">
<p class="Psd-error" v-show="psdShow">密码不能含有非法字符，长度在8-20之间</p>
<input type="password" name="YourTruePsd" class="reg-true-psd" v-model="passwordConfirms" placeholder="确认密码" ref="rePsdValues" autocomplete="off">
<p class="Psd-error-again" v-show="psdShowAgain">两次输入的密码不一致</p>
验证方法 ↓↓↓
// 验证密码
enterPsd () {
var enterPsd = this.$refs.PsdValues.value
var rePsd = /^[a-zA-Z0-9]{8,20}$/
if (rePsd.test(enterPsd)) {
this.psdShow = false
} else {
this.psdShow = true
}
}
在注册的时候加上判断两次密码是否一致，代码如下
if (enterPsdAgain !== enterPsd) {
this.psdShowAgain = true
} else {
this.psdShowAgain = false
}
整合在注册按钮里面也就是
// html
<div class="registered-btn-content">
<button class="registered-btn" @click.stop="registeredAccount" :class="{'ableClick': unableClick}" :disabled="isDisabled">注册</button>
</div>
方法如下 ↓↓↓
registeredAccount () {
var that = this
var user = that.username
var phone = that.Tel
var code = that.codes
var email = that.emails
var password = that.passwords
var passwordConfirm = that.passwordConfirms
var enterPsd = this.$refs.PsdValues.value
var enterPsdAgain = this.$refs.rePsdValues.value
if (enterPsdAgain !== enterPsd) {
this.psdShowAgain = true
} else {
this.psdShowAgain = false
}
if (user && phone && code && email && password && passwordConfirm) {
accountApi.registerServer({
user: user,
phone: phone,
code: code,
email: email,
password: enterPsd,
passwordConfirm: enterPsdAgain
}, (rsp) => {
that.username = ''
that.codes = ''
that.Tel = ''
that.emails = ''
that.passwords = ''
that.passwordConfirms = ''
alert('恭喜您，注册成功！')
that.$router.push('/Roleset')
})
} else {
alert('请填写完整！')
}
}
另外还需要给注册或者登陆按钮加上回车事件
handleEnter (el) {
if (el.keyCode === 13) {
this.handleLogin()
}
}
下面是上述代码的样式部分，需要自取
<style scoped>
.reg-container{
width: 100%;
max-height:650px;
overflow-y: auto;
overflow-x: hidden;
}
.reg-container::-webkit-scrollbar {
width: 9px;
}
.reg-container::-webkit-scrollbar-track {
background-color: #fff;
}
.reg-container::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0)
}
.reg-container::-webkit-scrollbar-button {
background-color: #fff;
}
.reg-container::-webkit-scrollbar-corner {
background-color: black;
}
.regMember{
width:900px;
min-height:538px;
background:#fff;
border:1px solid #ccc;
margin: 40px auto;
}
.regTip{
height:56px;
line-height:56px;
border-bottom:1px solid #ccc;
font-size:16px;
font-family: PingFangSC-Medium, sans-serif;
color:#333;
padding-left:30px;
}
.reg-name, .reg-tel, .reg-email, .reg-psd, .reg-true-psd{
display:block;
width:420px;
height:42px;
line-height:42px;
color:#666;
font-size:14px;
text-indent: 20px;
font-family: PingFangSC-Medium, sans-serif;
margin:0 auto;
border-radius:4px;
border:1px solid #ddd;
background:#f5f5f5;
outline:none;
}
.reg-getCode-content{
text-align: center;
}
.reg-code{
width:290px;
height:42px;
line-height:42px;
color:#666;
font-size:14px;
text-indent: 20px;
font-family: PingFangSC-Medium, sans-serif;
margin:0 auto;
margin-right:16px;
border-radius:4px;
border:1px solid #ddd;
background:#f5f5f5;
outline:none;
}
.reg-get-code{
width:110px;
height:42px;
line-height:42px;
display:inline-block;
color:#666;
font-size:14px;
font-family: PingFangSC-Medium, sans-serif;
margin:0 auto;
border-radius:4px;
border:1px solid #ddd;
background:#f5f5f5;
outline:none;
cursor:pointer;
}
.count{
width:110px;
height:42px;
line-height:42px;
display:inline-block;
color:#666;
font-size:14px;
font-family: PingFangSC-Medium, sans-serif;
margin:0 auto;
border-radius:4px;
border:1px solid #ddd;
background:#f5f5f5;
outline:none;
}
.reg-name{
margin-top:30px;
}
.reg-tel, .reg-getCode-content, .reg-email, .reg-psd, .reg-true-psd{
margin-top:20px;
}
.reg-agreePage{
width:100%;
display:inline-block;
margin-top:20px;
margin-bottom:20px;
margin-left:237px;
color:#666;
font-size:14px;
}
.reg-agreePage>a{
color:#05b6f7;
text-decoration: none;
}
.agreePage{
margin-left:16px;
}
#reg-check[type="checkbox"]{
position: relative;
top:2px;
display: none;
}
#cho-bg::before{
content: '';
display:inline-block;
border:1px solid #06b5f8;
width:14px;
height:14px;
vertical-align: middle;
position: relative;
right: -6px;
bottom: 1px;
}
#reg-check[type="checkbox"]:checked + #cho-bg::before{
background: url('~static/loginPic/register/ischeckbox.png') center no-repeat;
}
.registered-btn{
width:420px;
height:35px;
background:#05b6f7;
color:#fff;
font-size:16px;
border:none;
border-radius:4px;
cursor:pointer;
}
.registered-btn-content{
text-align: center;
}
.go-login{
color:#666;
margin-left:532px;
font-size:14px;
margin-top:20px;
}
.go-login>a{
color:#05b6f7;
text-decoration: none;
}
.codeshowError,
.nameshowError,
.telshowError,
.emailshowError,
.psdshowError{
border:1px solid #fd7b57;
background:#ffc1b2;
}
.Tel-error,
.Name-error,
.Code-error,
.Email-error,
.Psd-error,
.Psd-error-again{
color:#fd683d;
font-size:12px;
margin-left:240px;
margin-top:20px;
}
.ableClick{
background:#ccc;
cursor:default;
}
</style>
另外针对找回密码和重置密码需要保存鉴权token，后端给返回一个随机token（在有效期内操作），针对重置密码就不难了，无非就是调接口，还有通过手机号找回密码，邮箱找回密码（加上判断某种邮箱去对应的邮箱登录也是有做的），需要的留个邮箱~
网友评论