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