master

分支 (1)

管理

管理

master

Interview
/
index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>注册用户 - 码云 Gitee.com</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="./index.css">
    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
    <div id="app">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#303643"
            text-color="rgba(255,255,255,0.8)" active-text-color="rgba(255,255,255,0.9)">
            <img class="logo" src="./assets/logo.PNG" />
            <el-menu-item index="1">开源软件</el-menu-item>
            <el-menu-item index="2">企业版</el-menu-item>
            <el-menu-item index="3">高校版</el-menu-item>
            <el-menu-item index="4">博客</el-menu-item>
            <el-submenu index="5">
                <template slot="title">我的码云</template>
                <el-menu-item index="5-1">选项1</el-menu-item>
                <el-menu-item index="5-2">选项2</el-menu-item>
                <el-menu-item index="5-3">选项3</el-menu-item>
            </el-submenu>
            <el-menu-item index="6" class="right">
                登录
            </el-menu-item>
            <el-menu-item index="7" class="right">
                注册
            </el-menu-item>
            <el-input v-model="input" class="right" placeholder="搜索项目、代码片段..."></el-input>
        </el-menu>
        <div class="container">
            <div class="left-box">
                <div style="overflow: hidden;">
                    <div style="float: left;">
                        <img src="./assets/register.PNG" />
                    </div>
                    <div style="float: right;font-size:14px;">
                        已有账号?
                        <span style="color:#fe7300;cursor: pointer;">登录</span>
                    </div>
                </div>
                <el-form class="form" label-position="right" label-width="80px" :model="dynamicValidateForm" ref="dynamicValidateForm" :rules="rules">
                    <el-form-item label="邮箱" prop="email">
                        <el-input placeholder="请输入工作邮箱" v-model="dynamicValidateForm.email"></el-input>
                    </el-form-item>
                    <el-form-item label="验证码" prop="code">
                        <el-input v-model="dynamicValidateForm.code">
                            <template slot="append">XXXXXX</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="邮箱验证" prop="emailCode" class="emailCode">
                        <el-input placeholder="请输入邮箱验证" v-model="dynamicValidateForm.emailCode">
                            <template slot="append">
                                <span @click="getCode">{{count}}</span>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="dynamicValidateForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="个性域名" prop="domains">
                        <el-input v-model="dynamicValidateForm.domains">
                            <template slot="prepend">https://gitee.com/</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input placeholder="请输入密码" v-model="dynamicValidateForm.password" show-password></el-input>
                    </el-form-item>
                    <el-form-item prop="checked">
                        <el-checkbox v-model="dynamicValidateForm.checked"> 已阅读并同意
                            <a href="#">使用条款</a> 以及
                            <a href="#">非活跃帐号处理规范</a>
                        </el-checkbox>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('dynamicValidateForm')" class="button">注册</el-button>
                    </el-form-item>
                    <div>
                        <img style="cursor: pointer; width: 100%;" src="./assets/other.PNG">
                    </div>
                </el-form>
            </div>
            <div class="right-box">
                <div>
                    尝试码云企业版？
                </div>
                <div style="font-size:14px;padding:5px;">
                    <li>
                        <i class="el-icon-circle-check"></i> 不止更多成员、更高配额
                    </li>
                    <li>
                        <i class="el-icon-circle-check"></i> 灵活支撑协作研发、代码交付、IT 教育培训等场景代码托管需求
                    </li>
                </div>
                <div>
                    他们都在用
                </div>
                <div style="font-size:14px;line-height:1.5;">
                    已有超过 50000 企业研发团队选择码云企业版，60% 客户来自口碑推荐。
                </div>
                <div style="padding:10px 0;">
                    <img src="./assets/ad.PNG" style="width:100%" />
                </div>
                <div style="cursor: pointer;">
                    了解更多
                </div>
                <div class="more">
                    企业版介绍
                </div>
                <div class="more">
                    社区版与企业版功能对比
                </div>
            </div>

        </div>

    </div>
    <script>
        let validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                console.log(/^(?![^a-zA-Z]+$)(?!\\D+$).{8,16}$/.test(value))
                if (/^(?![^a-zA-Z]+$)(?!\\D+$).{8,16}$/.test(value) == false) {
                    callback(new Error('密码需要包含数字与字母，长度6到32位'));
                } else {
                    callback();
                }
            }
        }
        let validateCode = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入6位验证码'));
            } else {
                if (/^[a-z0-9_-]{6}$/.test(value) == false) {
                    callback(new Error('请输入6位验证码'));
                } else {
                    callback();
                }
            }
        }
        let validatAddress = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('个性域名不能为空'));
            } else {
                if (/^[a-z]{1,}[0-9_-]{1,}$/.test(value) == false) {
                    callback(new Error('地址只允许字母、数字或者下划线（_）、中划线（－），至少 2 个字符，必须以字母开头，不能以特殊字符结尾'));
                } else {
                    callback();
                }
            }
        }
        let validateName = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('昵称不能为空'));
            } else {
                callback();
            }
        }
        let validateEmail = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('邮箱不能为空'));
            } else {
                callback();
            }
        }
        let validateChecked = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请勾选同意服务条款'));
            } else {
                callback();
            }
        }
        new Vue({
            el: '#app',
            data: {
                count: '获取验证码',
                dynamicValidateForm: {
                    email: '',
                    code: '',
                    emailCode: '',
                    name: '',
                    domains: '',
                    password: '',
                    checked: ''
                },
                rules: {
                    email: [
                        { validator: validateEmail, trigger: 'change' },
                        { type: 'email', message: '邮箱格式有误', trigger: ['blur', 'change'] }
                    ],
                    code: [
                        { validator: validateCode, trigger: 'change' }
                    ],
                    emailCode: [
                        { validator: validateCode, trigger: 'change' }
                    ],
                    name: [
                        { validator: validateName, trigger: 'change' },
                    ],
                    domains: [
                        { validator: validatAddress, trigger: 'change' }
                    ],
                    password: [
                        { validator: validatePass, trigger: 'change' }
                    ],
                    checked: [
                        { validator: validateChecked, trigger: 'change' },
                    ],
                },
                activeIndex: '1',
                input: '',
            },
            methods: {
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            alert('submit!');
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
                getCode() {
                    const TIME_COUNT = 300;
                    if (!this.timer) {
                        this.count = TIME_COUNT;
                        this.timer = setInterval(() => {
                            if (this.count > 0 && this.count <= TIME_COUNT) {
                                this.count--;
                            } else {
                                this.count = "获取验证码"
                                clearInterval(this.timer);
                                this.timer = null;
                            }
                        }, 1000)
                    }
                },
                handleSelect(key, keyPath) {
                    console.log(key, keyPath);
                }
            }
        })

    </script>
</body>
<style>
</style>

</html>