element-ui表單模板

<template>
    <div class="groupRegisterBox">
        <!-- 內容 -->
        <div class="container">
            <!-- eui -->
            <div class="row">
                <div class="col col-xs-12 col-sm-8 col-sm-offset-2">
                    <div class="box-header with-border">
                        <h3 class="box-title">團體領隊注冊信息</h3>
                    </div>
                    <el-form ref="form1" 
                            :rules="rules1" 
                            :model="postObj" 
                            :size="isPC?'medium':'mini'"
                            :label-width="isPC?'auto':false" 
                            :disabled="false">
                        <el-form-item label="團體賬號(郵箱)" prop="email">
                            <el-input v-model="postObj.email" placeholder="請輸入郵箱"></el-input>
                        </el-form-item>
                        <el-form-item label="密碼" prop="password">
                            <el-input type="password" v-model="postObj.password" placeholder="請輸入密碼"></el-input>
                        </el-form-item>
                        <el-form-item label="確認密碼" prop="confirmPassword">
                            <el-input type="password" v-model="postObj.confirmPassword" placeholder="請確認密碼"></el-input>
                        </el-form-item>
                        
                        <el-form-item label="聯系人姓名" prop="linkMan">
                            <el-input  v-model="postObj.linkMan" placeholder="請輸入聯系人姓名"></el-input>
                        </el-form-item>
                        
                        <el-form-item label="單位名稱" prop="company">
                            <el-input  v-model="postObj.company" placeholder="請輸入單位名稱"></el-input>
                        </el-form-item>
                        
                        <el-form-item label="所屬部門" prop="department">
                            <el-input  v-model="postObj.department" placeholder="請輸入所屬部門"></el-input>
                        </el-form-item>
                        
                        <el-form-item label="通信地址" prop="address">
                            <el-input  v-model="postObj.address" placeholder="請輸入通信地址"></el-input>
                        </el-form-item>
                        
                        <el-form-item label="郵政編碼" prop="postalCode">
                            <el-input  v-model="postObj.postalCode" placeholder="請輸入郵政編碼"></el-input>
                        </el-form-item>
                        
                        <el-form-item label="手機號" prop="mobile">
                            <el-input  v-model="postObj.mobile" placeholder="請輸入手機號"></el-input>
                        </el-form-item>
                    </el-form>
                    <div style="text-align:right;padding:20px 0 50px;overflow:hidden;">
                        <button type="button" class="btn btn-success btn-lg pull-left" :class="{'btn-sm':!isPC}" @click="backToLogin()">
                                <i class="glyphicon glyphicon-arrow-left"></i>&emsp;取消注冊
                        </button>
                        <button type="button" @click="handleSubmit('form1')" class="btn btn-success btn-lg pull-right" :class="{'btn-sm':!isPC}">提交&emsp;<i class="glyphicon glyphicon-ok"></i></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    data(){
        
        var validPhone=(rule, value, callback)=>{
            if(value){
                if(!(/^1[3456789]\d{9}$/.test(value))){
                    callback(new Error('手機號格式不正確'));
                }else{
                    callback();
                }
            }else{
                callback();
            }
        };
        var validConfirmPassword=(rule, value, callback)=>{
            if(value){
                if(value != this.postObj.password){
                    callback(new Error('確認密碼和密碼不一致'));
                }else{
                    callback();
                }
            }else{
                callback();
            }
        }
        return{
            isPC:tools.isPC(),
            postObj:{
                email:"",//團體賬號 電子郵箱
                password:"",//密碼
                confirmPassword:"",//確認密碼
                linkMan:"",//聯系人姓名
                company:"",//單位名稱
                department:"",//所屬部門
                address:"",//通信地址
                postalCode:"",//郵政編碼
                mobile:"",//手機號
            },
            rules1:{
                email:[
                    { required: true, message: '請填寫郵箱', trigger: 'change' },
                    { type: 'email', message: '請輸入正確的郵箱地址', trigger: ['blur', 'change'] }
                ],
                password:[
                    { required: true, message: '請填寫密碼', trigger: 'change' },
                ],
                confirmPassword:[
                    { required: true, message: '請確認密碼', trigger: 'change' },
                    { validator: validConfirmPassword, trigger: 'change' },
                ],
                linkMan:[
                    { required: true, message: '請輸入聯系人姓名', trigger: 'change' }
                ],
                company:[
                    { required: true, message: '請輸入單位名稱', trigger: 'change' }
                ],
                department:[
                    { required: true, message: '請輸入所屬部門', trigger: 'change' }
                ],
                address:[
                    { required: true, message: '請輸入通信地址', trigger: 'change' }
                ],
                postalCode:[
                    { required: true, message: '請輸入郵政編碼', trigger: 'change' }
                ],
                mobile:[
                    { required: true, message: '請輸入手機號', trigger: 'change' },
                    { validator: validPhone, trigger: 'change' }
                ]

            },
        }
    },
    created(){
        var self=this;
        self.groupRegisterInit();//初始化
    },
    mounted(){
    },
    watch:{
        
    },
    computed:{
    },
    methods:{
        groupRegisterInit(){//初始化方法
            var self=this;
            
        },
        getToken(){//獲取token
            api.get(global.xuehui+'/qiniu/token',null,res=>{
                this.token=res.data;
            },err=>{
                console.log(err);
            })
        },
        backToLogin(){
            this.$router.go(-1);
        },
        handleSubmit(formName){//提交
            var self=this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    
                }
            });
        }
    }
}
</script>

<style lang="scss" scoped>
</style>

 

 

。