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