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，拉你入【前端项目学习群】，必有所收获。