uni-app+uview表单的联动验证，两个输入框同时填写或者同时不填，此外两个输入框的值影响第三个输入框

需求：一个总的输入框的值为另外两个输入框输入值的积，且前两个输入框联动验证，同时填或都不填，第三个输入框必填，如果前两个输入框有值，第三个输入框的值为前两者的积，若手动输入第三个框，则清空前两个输入框的值

以下是form表单和呈现图

html：

<u-form labelAlign="right" label-width="120" :model="formInfo" ref="uForm" :rules="rules">
				<u-form-item label="入库件数" prop="storageNum">
					<u--input v-model="formInfo.storageNum"></u--input>
				</u-form-item>
				<u-form-item label="入库规格" prop="storageWeight">
					<u--input v-model="formInfo.storageWeight"></u--input>
				</u-form-item>
				<u-form-item label="入库总重量(斤)" prop="totalWeight">
					<u--input v-model="formInfo.totalWeight" ></u--input>
				</u-form-item>
				<u-form-item label="单品收货备注" prop="remark">
					<u--input v-model="formInfo.remark"></u--input>
				</u-form-item>
			</u-form>

data:

            formInfo: {
				storageNum: '',
				storageWeight: '',
				totalWeight: '',
				remark: ''
			},
			rules: {
				storageNum: {
					message: '请填写入库件数',
					trigger: ['blur', 'change']
				},
				storageWeight: {
					message: '请填写入库规格',
					trigger: ['blur', 'change']
				},
				totalWeight: {
					required: true,
					message: '请填写入库总重量',
					trigger: ['blur', 'change']
				}
			},

表单确认验证：

        confirm() {
			this.$refs.uForm
				.validate()
				.then((res) => {
					uni.$u.toast('校验通过');
				})
				.catch((errors) => {
					uni.$u.toast('校验失败');
				});
			
		},

完成联动验证

使用watch监听整个对象，对象中有值变化就验证前两个输入框是否为空状态来改变表单的验证规则 rules，一旦有一个输入框的值不为空就给rules中这两个属性添加required属性值为true，反之则删除这个required属性

watch: {
		formInfo: {
			handler(value) {
				if (value.storageNum !== '' || value.storageWeight !== '') {
					this.rules.storageNum.required = true;
					this.rules.storageWeight.required = true;
				} else {
					delete this.rules.storageNum.required;
					delete this.rules.storageWeight.required;
				}
			},
			deep: true
		}
	}

完成第三个输入框计算

在监听中通过前两个输入框有值的情况下，计算结果赋值给第三个输入框

as 

watch: {
		formInfo: {
			handler(value) {
				if (value.storageNum !== '' || value.storageWeight !== '') {
					this.rules.storageNum.required = true;
					this.rules.storageWeight.required = true;
					this.formInfo.totalWeight = Number(this.formInfo.storageNum) * Number(this.formInfo.storageWeight) + '';
				} else {
					delete this.rules.storageNum.required;
					delete this.rules.storageWeight.required;
				}
			},
			deep: true
		}
	}

 注意用Number()方法将前两个输入框的值改为number类型，不然无法计算

最后加一个空字符串转换为string类型，不然无法通过表单校验方法

完成手动填写第三个输入框，清空前面输入框的值

为第三个input添加@input事件，值输入时触发的事件

<u-form-item label="入库总重量(斤)" prop="totalWeight">
					<u--input v-model="formInfo.totalWeight" @input="weightChange"></u--input>
				</u-form-item>

对应事件

weightChange(v) {
			this.formInfo.storageNum = ''
            this.formInfo.storageWeight = '';
		},

由于监听器的作用，修改前两个输入框值的同时，第三个输入框的值发生改变，并且触发了input更改事件，导致前两个输入框为空

解决：

结合输入框的获取焦点和失焦事件来判断用户是否手动输入修改第三个输入框的值，以此来清空前两个输入框的值

为第三个输入框添加blur和focus事件，并定义一个初始值为false的值来进行标识

<u-form-item label="入库总重量(斤)" prop="totalWeight">
					<u--input v-model="formInfo.totalWeight" @blur="inputBlur" @focus="inputFocus" @input="weightChange"></u--input>
				</u-form-item>

isInputFocus: false

 获取焦点和失焦事件

// 失去焦点事件
		inputBlur() {
			this.isInputFocus = false;
		},
		// 获取焦点
		inputFocus() {
			this.isInputFocus = true;
		}

修改input事件

weightChange(v) {
			if (this.isInputFocus) {
				(this.formInfo.storageNum = ''), (this.formInfo.storageWeight = '');
			}
		},

最终：