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