vue结合element的form表单校验

vue结合element的form表单校验

<template>
     <div>
        <el-form :model="completedForm" :rules="rules" ref="completedForm" label-width="100px" class="demo-completedForm">
            <el-col>
                <el-form-item label="活动名称" prop="name">
                     <el-input v-model="completedForm.name" style="width: 30%;"></el-input>
                </el-form-item>
            </el-col>
            <el-col>
                <el-form-item label="活动区域" prop="region">
                     <el-select v-model="completedForm.region" placeholder="请选择活动区域">
                               <el-option 
                                      v-for="(item,index) in dataList"
                                      :key="index"
                                      :label="item.label"
                                      :value="item.value"
                               ></el-option>
                     </el-select>
               </el-form-item>
            </el-col>
            <el-col>
                <el-form-item label="活动时间" prop="time">
                    <el-date-picker
                            v-model="completedForm.time"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            :default-time="['00:00:00', '23:59:59']"
                            :picker-options="pickerOptions"
                            key="daterange"
                            value-format="yyyy-MM-dd HH:mm:ss"
                     >
                     </el-date-picker>
                </el-form-item>
            </el-col>
            <el-col>
                <el-form-item label="活动性质" prop="type">
                    <el-checkbox-group v-model="completedForm.type">
                           <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                           <el-checkbox label="地推活动" name="type"></el-checkbox>
                           <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                           <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-col>
            <el-col>
                <el-form-item label="特殊资源" prop="resource">
                     <el-radio-group v-model="completedForm.resource">
                           <el-radio label="线上品牌商赞助"></el-radio>
                           <el-radio label="线下场地免费"></el-radio>
                     </el-radio-group>
                </el-form-item>
            </el-col>
            <el-col>
                <el-form-item label="活动形式" prop="desc">
                     <el-input type="textarea" v-model="completedForm.desc" style="width: 30%;"></el-input>
                </el-form-item>
            </el-col>
            <el-col>
                <el-form-item>
                    <el-button type="primary" @click="submitForm()">创建</el-button>
                    <el-button @click="resetForm()">重置</el-button>
                </el-form-item>
            </el-col>
        </el-form>
     </div>
</template>
<script>
export default {
      data(){
             return {
                dataList:[
                     {label:'北京',value:'01'},
                     {label:'成都',value:'02'},
                     {label:'上海',value:'03'},
                     {label:'广州',value:'04'},
                     {label:'深圳',value:'05'},
                ],
                choiceDate: null,
                pickerOptions: {
                    onPick: ({ maxDate, minDate }) => {
                        // 把选择的第一个日期赋值给一个变量。
                        this.choiceDate = minDate.getTime()
                        // 如何你选择了两个日期了，就把那个变量置空
                        if (maxDate) this.choiceDate = ''
                    },
                    disabledDate: time => {
                            let nowTime=new Date();
                            let year=nowTime.getFullYear();
                            let month=nowTime.getMonth()+1;
                            let day=nowTime.getDate();
                            let now=`${year}-${month}-${day} 23:59:59`;
                            let mynow=new Date(now).getTime();
                            // 如何选择了一个日期
                            if (this.choiceDate) {
                                // 10天的时间戳
                                const date = 9 * 24 * 3600 * 1000
                                // 当前日期 - date = 10天之前
                                const minTime = this.choiceDate - date
                                // 当前日期 + date = 10天之后
                                const maxTime = this.choiceDate + date
                                return (
                                    time.getTime() < minTime ||
                                    time.getTime() > maxTime ||
                                    // 限制不能选择今天及以后
                                    time.getTime() >mynow
                                )
                            } else {
                                // 如果没有选择日期，就要限制不能选择今天及以后
                                return time.getTime() > mynow
                            }
                    }
                },
                completedForm: {
                    name: '',
                    region: '',
                    time:[],
                    type: [],
                    resource: '',
                    desc: ''
                },
                rules: {
                    name: [
                        { required: true, message: '请输入活动名称', trigger: 'blur' },
                       // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                    region: [
                        { required: true, message: '请选择活动区域', trigger: 'change' }
                    ],
                    type: [
                        { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                    ],
                    resource: [
                        { required: true, message: '请选择活动资源', trigger: 'change' }
                    ],
                    desc: [
                        { required: true, message: '请填写活动形式', trigger: 'blur' }
                    ],
                    time:[
                        {
                            required: true, 
                            trigger: 'change',
                            validator:(rule,value,callback)=>{
                                      if(!value || !Array.isArray(value) || !value.length){
                                          callback(new Error("请选择查询时间范围！"))
                                      }else if(new Date(value[1]).getTime()-new Date(value[0]).getTime()>10 * 24 * 3600 * 1000){
                                          callback(new Error("时间范围不能大于10天！"))
                                      }else{
                                          callback()   // 自定义校验规则一定要注意这里的callback(),如果写少了会导致校验报错
                                      }
                            }  
                        }
                    ]
                }
             }
      },
      methods:{
        submitForm() {
           this.$refs.completedForm.validate((valid) => {
            console.log(this.completedForm.time[0])
                    if(valid){
                            if(this.completedForm.time){
                                  if(new Date(this.completedForm.time[1]).getTime()-new Date(this.completedForm.time[0]).getTime()>10*24*3600*1000){
                                        this.$message({
                                            type:'warning',
                                            message:'时间区间不能大于10天！',
                                            offset:100
                                        })
                                        return
                                  }
                            }
                            this.$message({
                                type:'warning',
                                message:'表单校验通过了！',
                                offset:100
                            })
                    }else{
                            this.$nextTick(() => {
                                            // 获取错误节点
                                            let isError = this.$refs.completedForm.$el.getElementsByClassName('is-error')
                                            isError[0].scrollIntoView({
                                                // 滚动到指定节点
                                                // 值有start,center,end，nearest，当前显示在视图区域中间
                                                block: 'center',
                                                // 值有auto、instant,smooth，缓动动画（当前是慢速的）
                                                behavior: 'smooth',
                                            })
                            })
                    }
           });
        },
        resetForm() {
             this.$refs.completedForm.resetFields();
        }
      }
}
</script>