美文网首页
element form校验两种方式

element form校验两种方式

作者: 給我小鱼干 | 来源:发表于2020-05-06 10:05 被阅读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'},
                ],
            }
        };
    },

相关文章

网友评论

      本文标题:element form校验两种方式

      本文链接:https://www.haomeiwen.com/subject/ofjightx.html