vue+node全栈移动商城【9】注册页面判断条件

上一节咱们实现了最基本的注册页面。其实同学们，在实际的工作当中，登录、注册页面所要判断的条件，非常之多，岂止一篇文章可以概括，简直就可以写一本书出来。像什么用户名、密码、用户名不存在、密码错误，那都是小意思，还有什么长度不够，字符不对，重复提交，不能为空，密码重复不一致，加密解密码、同ip在不能连续重复多次提交、达到相应的错误次数时封禁ip几分钟等等。。。很多很多，但在这个系列的教程这，登录、注册并不是咱们的主要教学方向，所以咱们就是在简单可用的基础上，实现基本的注册、登录，就ok了。那么，接下来，直接看代码，很简单，零基础的同学，你们直接复制了就可以使用。

这是html部分的，
<template>
<div>
<van-nav-bar
:title=msg
left-text=”返回”
left-arrow
@click-left=”goBackFn”
/>

<van-field
v-model=”username”
required
clearable
label=”用户名”
placeholder=”请输入用户名”
@click-icon=”username=””
:error-message=”userErr”
/>

<van-field
v-model=”password”
type=”password”
required
clearable
label=”密码”
placeholder=”请输入密码”
@click-icon=”username=””
:error-message=”passErr”
/>

<van-field
v-model=”password2″
type=”password”
required
clearable
label=”重复密码”
placeholder=”请重复输入密码”
@click-icon=”username=””
:error-message=”passErr2″
/>

<van-field
v-model=”describe”
label=”个人签名”
placeholder=”请输入个人签名”
/>

<van-button type=”danger” @click=”registerFn”>立即注册</van-button>
<van-button type=”danger” @click=”registerResetBtn”>重置</van-button>

</div>
</template>

这是js部分的
export default{
name:’register’,
data(){
return {
msg:’注册页面’,

username:”,
password:”,
password2:”,
describe:”,

userErr:”,
passErr:”,
passErr2:”
}
},
methods:{
// 回到上一步
goBackFn(){
this.$router.go(-1);
},
// 注册
registerFn(){
// 每次重置 err 信息
this.userErr=”;
this.passErr = ”;
this.passErr2 = ”;

// 注册信息Obj
let _registerObj = {
username : this.username,
password : this.password,
password2 : this.password2,
describe : this.describe
}
// 用户注册它的判断条件，非常非常非常的多，咱们在这就进行一下简单条件的判断
if( _registerObj.username === ” ){
this.userErr = ‘用户名不能为空’;
return false;
}

if( _registerObj.password === ” ){
this.passErr = ‘密码不能为空’;
return false;
}

if( _registerObj.password2 === ” ){
this.passErr2 = ‘重复密码不能为空’;
return false;
}

if( _registerObj.password !== _registerObj.password2 ){
this.passErr2 = ‘重复密码不一致’;
return false;
}

console.log( _registerObj );
},
// 重置
registerResetBtn(){

}
}
}
加我微信号：blazeloulan，拉你入【前端项目学习群】，必有所收获。