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，拉你入【前端項目學習羣】，必有所收穫。