vue iview表单复杂验证

项目中用到表单复杂验证规则,在此记录一下,省着以后忘了。

1.简单版本

<Form ref="editData" :model="editData" :label-width="80" :rules="rules">
	<FormItem label="上公差" prop="dataValueUp">
     	<Input v-model="editData.dataValueUp" onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;"></Input>
    </FormItem>
    <FormItem label="下公差" prop="dataValueLow">
            <Input v-model="editData.dataValueLow" ></Input>
	</FormItem>
	<FormItem >
   	 	<Button @click="cancel('editData')" style="margin-left: 15px;">取消</Button>
   	 	<Button type="info" @click="amend('editData')" style="margin-left: 10px">确定</Button>
	</FormItem>
	// onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;" 这个是js方法
	// 禁止输入空格,就是空格键按键无效

data() {
            const dataValueLowValidate = (rule, value, callback) => {
                if (this.editData.dataValueUp){
                    if (value === "" || value === null) {
                        callback(new Error('请填写该项'));
                    } else {
                        value = value.toString();
                        if (!value.match(/^(\-|\+?)\d+(\.\d+)?$/g)) {
                            callback(new Error("必须为数字"));
                        } else if (parseInt(value) > parseInt(this.editData.dataValueUp)) {
                            callback(new Error("下公差不能大于上公差"));
                        } else {
                            callback();
                        }
                    }
                } else {
                    if (value === "" || value === null) {
                        callback();
                    } else {
                        value = value.toString();
                        if (!value.match(/^(\-|\+?)\d+(\.\d+)?$/g)) {
                            callback(new Error("必须为数字"));
                        } else if (parseInt(value) > parseInt(this.editData.dataValueUp)) {
                            callback(new Error("下公差不能大于上公差"));
                        } else {
                            callback();
                        }
                    }
                }
            };
            const dataValueUpValidate = (rule, value, callback) => {
                if (this.editData.dataValueLow){
                    if (value === "" || value === null) {
                        callback(new Error('请填写该项'));
                    } else {
                        value = value.toString();
                        if (!value.match(/^(\-|\+?)\d+(\.\d+)?$/g)) {
                            callback(new Error("必须为数字"));
                        } else {
                            callback();
                        }
                    }
                } else {
                    if (value === "" || value === null) {
                        callback();
                    } else {
                        value = value.toString();
                        if (!value.match(/^(\-|\+?)\d+(\.\d+)?$/g)) {
                            callback(new Error("必须为数字"));
                        } else {
                            callback();
                        }
                    }
                }
            };
            return {
            rules: {
                    dataValueUp: [
                        {trigger: 'blur', validator: dataValueUpValidate}
                    ],
                    dataValueLow: [
                        {validator: dataValueLowValidate, trigger: 'change'}
                    ],
                },
            }
}
methods:{
            amend(name) {
            	// 验证规则
                this.$refs[name].validate((valid) => {
                    if (valid) {
                      	
                    } else {
                        this.$Message.error('请按规则填写!');
                    }
                })
            },
}
// 主要就是几个东西: 
// 1.prop="dataValueLow" 在FormItem 添加prop属性。
// 对应Form ref="editData" :model="editData" :label-width="80" :rules="rules"中的rules。
// 在data中设置rules属性 特殊验证用validator: dataValueLowValidate (自定义的属性)。
// 在 data中定义属性dataValueLowValidate,在里面定义一下特殊的验证规则,一般正则,或者逻辑定义。

简单版就这样了,还有个复杂点的,computed中验证,有时间在写吧,这个简单的挺好用的。

忘加图了,补充一下,点击确定按钮时验证。