uniapp 扩展组件 uni-forms 的表单验证之 validateFunction 只响应一次

uniapp 扩展组件 uni-forms 的表单验证之 validateFunction 只响应一次

问题代码

直接从官方示例中复制过来改的。为了演示

<template>
	<view>
		<uni-forms ref="form" :modelValue="formData" :rules="rules">
			<uni-forms-item label="兴趣爱好" required name="hobby">
				<uni-data-checkbox v-model="formData.hobby" multiple :localdata="hobbys" />
			</uni-forms-item>
		</uni-forms>
		<button class="button" @click="submit">校验表单</button>
	</view>
</template>
<script>
export default {
      
      
	data() {
      
      
		return {
      
      
			formData:{
      
      },
			rules: {
      
      
				hobby: {
      
      
					rules: [{
      
      
						validateFunction:function(rule,value,data,callback){
      
      
							if (value.length < 2) {
      
      
								callback('请至少勾选两个兴趣爱好')
							}
							return true
						}
					}]
				}
			}
		}
	},
	onReady() {
      
      
		this.$refs.form.setRules(this.rules)// 需要在onReady中设置规则
	},
	methods: {
      
      
		submit(form) {
      
      
			this.$refs.form.validate().then(console.log).catch(console.error)
		}
	}
}
</script>

官方说明

在这里插入图片描述
说了但好像又没说。。。
官方说了要在 onReady 绑定验证规则

onReady() {
    
    
			this.$refs.form.setRules(this.rules); // 需要在onReady中设置规则
		},

但我的实际代码是从另一个页面复制整个uni-forms 来改的。所以 :rules="rules" 就没有去掉。结果这就导致了 validateFunction 只有在第一次调用 this.$refs.form.validate() 有效。
注意: 使用 validateFunction 时:

  1. onReady 绑定验证规则。
  2. 去掉 uni-forms 上的 :rules="rules"。(如果有的话)

疑惑:
onReady:rules="rules" 不能正常工作,为啥不抛个异常出来?
为啥又能触发一次,来迷惑人呢。。。唉。。

参考资料

组件名:uni-forms

猜你喜欢

转载自blog.csdn.net/jx520/article/details/132206159
今日推荐