uni-form输入完验证和提交使用两种验证方式

uni-form输入完验证和提交使用两种验证方式

在使用uni-app的时候，uni-form实际上没有组件默认的submit方式，实际上在提交前的验证都是通过方法形如：

submit(ref) {
	this.$refs.validForm.validate().then(res => {
		console.log('success', res);
		uni.showToast({
			title: `校验通过`
		})
	}).catch(err => {
		console.log('err', err);
	})
},

实现的

所以每次在提交前表单会执行一次在rules中设置的校验函数validateFunction

如果我们希望在输入之后执行一种验证方式而在提交前执行另外一种（比如在输入后向后台请求数据，之后再在表单中修改别的数据项，但是在提交的时候不希望再次请求），可以使用watch

现在比如现在我希望formData的id属性使用两种校验方式，我们可以新建一个新属性ids对象，它包含属性search和submit，分别用于输入后验证和提交时验证

在template中，将之前绑定id的name换为绑定ids，然后绑定数据项id的地方绑定刚刚新建的ids的search用于输入后验证：

<uni-forms-item label="身份证:" required name="ids">
    <input class="uni-input" :cursor-spacing="18" v-model="formData.ids.search" placeholder="请输入"/>
</uni-forms-item>

在watch中监测值的变化：

watch: {
	'formData.ids.search'(newValue, oldValue) {
		console.log("newValue", newValue)
		console.log("oldValue", oldValue)
		  
		if (newValue !== oldValue) {
            // 需要执行的操作
            // 最后记得赋值给submit属性
            this.formData.ids.submit = newValue;
		}
	}
},

校验函数变为：

validateFunction:function(rule,value,data,callback){
	if(value.submitd的正确条件) {
        // 赋值给本来的id属性
		this.formData.id = value.submit;
		return true 
	}else {
	   callback("请输入正确的格式");  
	   return false;
    }
}

记得提交的时候实际上多了一个ids属性：

submit(form) {
	this.$refs.form.validate().then(async(res) => {
		console.log('表单数据信息：', res);// 这里多了一个ids属性
	}).catch(err =>{
		console.log('表单错误信息：', err);
	})
},