benz-register
/
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mercedes Benz open day registration system</title>
    <link rel="stylesheet" href="./css/global.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="./js/slider.js"></script>
</head>

<body>
    <div class="bckbox" id="app">
        <div class="header"></div>
        <el-form ref="registerRef" :rules="registerrules" class="refisterform" :model="register">
            <el-form-item prop="Name">
                <el-input v-model="register.Name" id="username" placeholder="Name"></el-input>
            </el-form-item>
            <el-form-item class="margintop" prop="Email">
                <el-input v-model="register.Email" id="email" placeholder="Email"></el-input>
            </el-form-item>
            <el-form-item class="margintop" prop="Entity">
                <el-input v-model="register.Entity" id="entity" placeholder="Entity"></el-input>
            </el-form-item>
            <el-form-item class="buttonbox margintop">
                <el-button @click="handleSubmit">SUBMIT</el-button>
            </el-form-item>
        </el-form>
        <div class="footer"></div>
        <!-- 成功文本框 -->

    </div>

    <!-- 修改body 高度 -->
    <script type="text/javascript">
        var winHeight = document.body.clientHeight || document.documentElement.clientHeight;
        setTimeout(function () {
            document.getElementsByTagName('body')[0].style.height = window.innerHeight + 'px';
        }, 20);
        //调用函数，获取数值
        window.onresize = function () {
            var winHeight = document.body.clientHeight || document.documentElement.clientHeight;
            console.log(winHeight)
            setTimeout(function () {
                document.getElementsByTagName('body')[0].style.height = window.innerHeight + 'px';
            }, 20);
        }
    </script>
</body>
<!-- import Vue before Element -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入 http-vue-loader -->
<!-- <script src="https://unpkg.com/http-vue-loader"></script> -->
<script>
    // Vue.use(httpVueLoader);
    new Vue({
        el: '#app',
        data: function () {
            return {
                register: {
                    Name: '',
                    Email: '',
                    Entity: ''
                },
                issucess: window.sessionStorage.getItem('isSuccess'),
                registerrules: {
                    Name: [
                        { required: true, message: 'Please enter your name!', trigger: 'blur' },
                        { min: 2, max: 30, message: 'The length is between 2 and 30 characters!', trigger: 'blur' }
                    ],
                    Email: [
                        { required: true, message: 'Please enter email address!', trigger: 'blur' },
                        { min: 2, max: 50, message: 'The length is between 2 and 50 characters!', trigger: 'blur' }
                    ],
                    Entity: [
                        { required: true, message: 'Please enter entity!', trigger: 'blur' },
                        { min: 2, max: 200, message: 'The length is between 2 and 200 characters!', trigger: 'blur' }
                    ],
                }
            }
        },
        methods: {
            handleSubmit() {
                console.log(window.sessionStorage.getItem('isSuccess'))
                // if (window.sessionStorage.getItem('isSuccess') === '1') {
                var that = this
                console.log(this.issucess)
                this.$refs.registerRef.validate(async () => {
                    if (this.register.Name.length === 0) {
                        this.$message.error('Please enter you username!')
                        document.querySelector('#username').focus()
                        return
                    }
                    var reg = /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/
                    if (!reg.test(that.register.Email)) {
                        this.$message.error('Please enter the correct email address!')
                        document.querySelector('#email').focus()
                        return
                    }
                    if (this.register.Entity.length === 0) {
                        this.$message.error('Please enter entity!')
                        document.querySelector('#entity').focus()
                        return
                    }
                    // 提交

                    // 提交成功
                    this.$notify({
                        title: "Submitted successfully!",
                        // message: '',
                        position: 'top-left',
                        type: 'success'
                    });
                    window.sessionStorage.setItem('isSuccess', '0')
                    this.register.Name = ''
                    this.register.Email = ''
                    this.register.Entity = ''
                })
            }
            // }
        },
    })
</script>

</html>