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
时:
- 在
onReady
绑定验证规则。 - 去掉
uni-forms
上的:rules="rules"
。(如果有的话)
疑惑:
onReady
和 :rules="rules"
不能正常工作,为啥不抛个异常出来?
为啥又能触发一次,来迷惑人呢。。。唉。。
参考资料
组件名:uni-forms