共计 1809 个字符，预计需要花费 5 分钟才能阅读完成。
上一节咱们实现了最基本的注册页面。其实同学们，在实际的工作当中，登录、注册页面所要判断的条件，非常之多，岂止一篇文章可以概括，简直就可以写一本书出来。像什么用户名、密码、用户名不存在、密码错误，那都是小意思，还有什么长度不够，字符不对，重复提交，不能为空，密码重复不一致，加密解密码、同 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，拉你入【前端项目学习群】，必有所收获。