表单验证不触发解决办法

  • 第一个参数传入当前表单组件所在的 name,同当前父组件 uni-forms-item 绑定属性 name 的值
  • 第二个参数传入需要校验的值,内置组件可以通过 $event.detail.value 获取到组件的返回值,自定义组件传入需要校验的值即可
  • 第三个参数传入 uni-forms 组件绑定属性 ref 的值,通常在多表单的时候需要传入,用来区分表单,如页面中仅有一个 uni-forms 可忽略

1:直接在input中加入@input="binddata('email',$event.detail.value)"方法

<uni-forms-item label="邮箱" name="email">
	<input class="input" 
        v-model="formData.email" 
        type="text" 
        placeholder="请输入用户名"     
        @input="binddata('email',$event.detail.value)" />
</uni-forms-item>

2:validateFunction 自定义校验规则

  • rule : 当前校验字段在 rules 中所对应的校验规则
  • value : 当前校验字段的值
  • data : 所有校验字段的字段和值的对象
  • callback : 校验完成时的回调,一般无需执行callback,返回true(校验通过)或者false(校验失败)即可 ,如果需要显示不同的 errMessage,如果校验不通过需要执行 callback('提示错误信息'),如果校验通过,执行callback()即可

(1)在onReady中设置规则

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

(2)html代码

<uni-forms ref="form" :modelValue="formData">
	<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>

(3)rules代码

rules: {
	hobby: {
		rules: [{
			required: true,
			errorMessage: '请选择兴趣',
		},{
			validateFunction:function(rule,value,data,callback){
				if (value.length < 2) {
					callback('请至少勾选两个兴趣爱好')
				}
				return true
			}
		}]
	}
}

(4)submit函数

submit(form) {
	this.$refs.form.validate().then(res=>{
		console.log('成功:', res);
	}).catch(err =>{
		console.log('失败:', err);
	})
}

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐