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>

官方说明

uniapp 扩展组件 uni-forms 的表单验证之 validateFunction 只响应一次_第1张图片
说了但好像又没说。。。
官方说了要在 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

你可能感兴趣的:(#,uni-app,uni-app)