Php + Vue.js + Element UI 实现带表单验证的注册登录

<div id="view" style="opacity:0">
            <!-- Menu -->
            <el-menu class="el-menu-demo" mode="horizontal">
                <el-menu-item>
                    <a href="https://demo.ouorz.com/build/">
                        <img style="width:120px;margin-top:-5px" src="static/eugrade_logo_with_text@3x.png">
                    </a>
                </el-menu-item>
                <el-menu-item v-for="item in nav_items"> <a :href="item.url" target="_blank">{{ item.name }}</a>

                </el-menu-item>
                <el-menu-item style="float:right">
                    <el-button type="primary" style="margin-top: -5px;">Get Started</el-button>
                </el-menu-item>
            </el-menu>
            <!-- Menu -->
            <!-- Form-->
            <div class="container">
                <el-card class="login-form-div" shadow="hover" style="margin-top:10vh;padding: 4vh 0 7vh 0;">
                    <div class="login-form-logo">
                        <img src="https://static.ouorz.com/cbnpa-bzlhy.svg">
                    </div>
                    <el-form ref="form" :model="form" class="login-form" :rules="rule">
                        <el-form-item prop="name" v-if="type==false">
                            <el-input placeholder="Username" type="text" v-model="form.name"></el-input>
                        </el-form-item>
                        <!-- 登录邮箱 -->
                        <el-form-item prop="email_login" v-if="type">
                            <el-input placeholder="Email Address" type="email" v-model="form.email_login"></el-input>
                        </el-form-item>
                        <!-- 登录邮箱 -->
                        <!-- 注册邮箱 -->
                        <el-form-item prop="email" v-else>
                            <el-input placeholder="Email" type="email" v-model="form.email"></el-input>
                        </el-form-item>
                        <!-- 注册邮箱 -->
                        <el-form-item prop="pass">
                            <el-input placeholder="Password" type="password" v-model="form.password"></el-input>
                        </el-form-item>
                        <el-form-item prop="check_pass" v-if="type==false">
                            <el-input placeholder="Confirm" type="password" v-model="form.checkpwd"></el-input>
                        </el-form-item>
                        <el-form-item style="margin-top:35px">
                            <el-button type="primary" @click="submitLogin"><i class="el-icon-circle-check"></i> Submit</el-button>
                            <el-button type="text" @click="type = false" v-if="type"><i class="el-icon-circle-plus-outline"></i> Sign Up</el-button>
                            <el-button type="text" @click="type = true" v-else><i class="el-icon-circle-check-outline"></i> Sign In</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>
            <!-- Form -->
        </div>

window.onload = function () {
            $('#view').css('opacity', '1');
            var login = new Vue({
                el: '#view',
                data() {

                    //验证密码
                    var validatePass = (rule, value, callback) => {
                        if (this.form.password == '') {
                            callback(new Error('Please enter your password'));
                        } else if (this.form.password.length < 7) {
                            callback(new Error('Please enter a password with more than 6 digits'));
                        } else {
                            callback();
                        }
                    };

                    //验证用户名
                    var validateName = (rule, value, callback) => {
                        if (this.form.name == '') {
                            callback(new Error('Please enter your username'));
                        } else if (this.form.name.length > 20) {
                            callback(new Error('Please enter a username with no more than 20 characters'));
                        } else {
                            axios.get('api/login.php?action=check_uname&name=' + this.form.name)
                                .then(e => {
                                this.check_status = e.data.status;
                                if (this.check_status) {
                                    callback();
                                } else {
                                    callback(new Error('Username has been used'));
                                }
                            })
                        }
                    };

                    //验证邮箱
                    var validateEmail = (rule, value, callback) => {
                        if (this.form.email == '') {
                            callback(new Error('Please enter your email address'));
                        } else {
                            axios.get('api/login.php?action=check_email&email=' + this.form.email)
                                .then(e => {
                                this.check_status_2 = e.data.status;
                                if (this.check_status_2) {
                                    callback();
                                } else {
                                    callback(new Error('You can only use this email address in 3 accounts '));
                                }
                            })
                        }
                    };

                    //验证重复密码
                    var validateCheckPass = (rule, value, callback) => {
                        if (this.form.checkpwd === '') {
                            callback(new Error('Please enter your password again'));
                        } else if (this.form.checkpwd !== this.form.password) {
                            callback(new Error('Two inputs don\'t match'));
                        } else {
                            callback();
                        }
                    };


                    return {
                        loading: true,
                        nav_items: null,
                        check_status: '',
                        check_status_2: '',
                        type: true,
                        //表单内容
                        form: {
                            email: '',
                            email_login: '',
                            password: '',
                            name: '',
                            checkpwd: ''
                        },
                        //表单规则
                        rule: {
                            email: [
                                {
                                    required: true,
                                    message: 'Please enter your email address',
                                    trigger: ['blur', 'change']
                                },
                                {
                                    required: true,
                                    type: 'email',
                                    message: 'Please enter a correct email address',
                                    trigger: ['blur', 'change']
                                },
                                {
                                    required: true,
                                    validator: validateEmail,
                                    trigger: ['blur']
                                }
                            ],
                            email_login: [
                                {
                                    required: true,
                                    message: 'Please enter your email address',
                                    trigger: ['blur', 'change']
                                },
                                {
                                    required: true,
                                    type: 'email',
                                    message: 'Please enter a correct email address',
                                    trigger: ['blur', 'change']
                                }
                            ],
                            name: [
                                {
                                    required: true,
                                    validator: validateName,
                                    trigger: ['blur']
                                }
                            ],
                            pass: [
                                {
                                    required: true,
                                    validator: validatePass,
                                    trigger: ['blur', 'change']
                                }
                            ],
                            check_pass: [
                                {
                                    required: true,
                                    validator: validateCheckPass,
                                    trigger: ['blur', 'change']
                                }
                            ]
                        }
                    }
                },
                mounted() {
                    axios.get('api/index.php')
                        .then(e => {
                        this.nav_items = e.data;
                    })
                        .then(() => {
                        this.loading = false;
                    })
                },
                methods: {
                    submitLogin() {
                        this.$refs['form'].validate((valid) => {
                            if (valid) {
                                if (this.type) {
                                    var mes = '';
                                    var formData = new FormData();
                                    formData.append('email_login', this.form.email_login);
                                    formData.append('password', this.form.password);

                                    $.ajax({
                                        url: 'api/login.php?action=login',
                                        type: "POST",
                                        data: formData,
                                        cache: false,
                                        dataType: 'json',
                                        processData: false,
                                        contentType: false,
                                        success: function (data) {
                                            if (data.status == true) {
                                                login.$notify.success({
                                                    title: 'Welcome',
                                                    message: 'Welcome to Eugrade',
                                                    showClose: false
                                                });
                                                cookie.set('eg_logged_in_id', data.id);
                                                setTimeout('location.href="https://demo.ouorz.com/build"', 1000);
                                            } else {
                                                if(data.code == 'email'){
                                                    mes = 'Please check your email address';
                                                }else if(data.code == 'pwd'){
                                                    mes = 'Please check your password';
                                                }else{
                                                    mes = 'Invalid email or password';
                                                }
                                                login.$notify.error({
                                                    title: 'Error',
                                                    message: mes
                                                });
                                            }
                                        },
                                        error: function (data) {
                                            login.$notify.error({
                                                title: 'Error',
                                                message: 'Server Error'
                                            });
                                        }
                                    });
                                } else {

                                    var formData = new FormData();
                                    formData.append('email', this.form.email);
                                    formData.append('password', this.form.password);
                                    formData.append('name', this.form.name);
                                    formData.append('checkpwd', this.form.checkpwd);

                                    $.ajax({
                                        url: 'api/login.php?action=register',
                                        type: "POST",
                                        data: formData,
                                        cache: false,
                                        dataType: 'json',
                                        processData: false,
                                        contentType: false,
                                        success: function (data) {
                                            if (data.status == true) {
                                                login.$notify.success({
                                                    title: 'Welcome',
                                                    message: 'Thanks for joining Eugrade',
                                                    showClose: false
                                                });
                                                cookie.set('eg_logged_in_id', data.id);
                                                setTimeout('location.href="https://demo.ouorz.com/build"', 2000);
                                            } else {
                                                this.$notify.error({
                                                    title: 'Error',
                                                    message: 'Server Error'
                                                });
                                            }
                                        },
                                        error: function (data) {
                                            this.$notify.error({
                                                title: 'Error',
                                                message: 'Server Error'
                                            });
                                        }
                                    });
                                }
                            } else {
                                this.$notify.error({
                                    title: 'Error',
                                    message: 'Please make sure you\'ve entered all information correctly'
                                });
                                return false;
                            }
                        });
                    }
                }
            });
        }

git clone git@github.com:HelipengTony/eugrade.git