element form校验两种方式

2020-05-06  本文已影响0人  給我小鱼干
data() {
        const numberReg = /^(([1-9]+)|([0-9]+\.[0-9]{1,2}))$/;
        const numValidator = (rule, value, callback) => {
            const val = this.formData.pipelineLength;
            if(val.length === 0){
                callback();
                return;
            }
            if(!numberReg.test(val)){
                callback(new Error('请输入数字,且最多小数点后两位'));
            }
            callback();
        };
        return {
            mediaTypeList:[],
            rules:{
                pipelineName: [
                    {required: true, message: '管道名称不能为空', trigger: 'blur'},
                ],
                pipelineCode:[
                    {required: true, message: '管道名称不能为空', trigger: 'blur'},
                ],
                pipelineType:[
                    {required: true, message: '管道类型不能为空', trigger: ['blur','change']},
                ],
                mediaType:[
                    {required: true, message: '输送介质类型不能为空', trigger: ['blur','change']},
                ],
                mediaName:[
                    {required: true, message: '输送介质名称不能为空', trigger: 'blur'},
                ],
                productionTime:[
                    {required: true, message: '投产时间不能为空', trigger: ['blur','change']},
                ],
                pipelineLength:[
                    {required: true, message: '管道长度不能为空', trigger: 'blur'},
                    {validator: numValidator, message: '请输入数字,且最多小数点后两位', trigger: 'blur'},
                ],
                designUnit: [
                    {required: true, message: '管道设计单位不能为空', trigger: 'blur'},
                ],
                constructionUnit:[
                    {required: true, message: '管道施工单位不能为空', trigger: 'blur'},
                ],
            }
        };
    },
data() {
        return {
            mediaTypeList:[],
            rules:{
                pipelineName: [
                    {required: true, message: '管道名称不能为空', trigger: 'blur'},
                ],
                pipelineCode:[
                    {required: true, message: '管道名称不能为空', trigger: 'blur'},
                ],
                pipelineType:[
                    {required: true, message: '管道类型不能为空', trigger: ['blur','change']},
                ],
                mediaType:[
                    {required: true, message: '输送介质类型不能为空', trigger: ['blur','change']},
                ],
                mediaName:[
                    {required: true, message: '输送介质名称不能为空', trigger: 'blur'},
                ],
                productionTime:[
                    {required: true, message: '投产时间不能为空', trigger: ['blur','change']},
                ],
                pipelineLength:[
                    {required: true, message: '管道长度不能为空', trigger: 'blur'},
                    {
                        pattern: /^(([1-9]+)|([0-9]+\.[0-9]{1,2}))$/,
                        message: '请输入数字,且最多小数点后两位',
                        trigger: 'change'
                    }
                ],
                designUnit: [
                    {required: true, message: '管道设计单位不能为空', trigger: 'blur'},
                ],
                constructionUnit:[
                    {required: true, message: '管道施工单位不能为空', trigger: 'blur'},
                ],
            }
        };
    },
上一篇 下一篇

猜你喜欢

热点阅读