uni-app uni-forms组件的表单验证

前言

• 最近使用uni-app开发时，在使用加强表单时，使用表单验证的过程和PC端的区别
• uni-app文档说如果要使用自定义表单验证是需要去掉form中:rules="rules",使用ref绑定
• 但最终我使用validateFunction 自定义校验规则，使用上面2种方式都会触发，
• 个人觉得还是以官方文档为主，万一:rules="rules"失效导致错误就得不偿失

文档说明

<template>
	<view>
		<uni-forms ref="form" :rules="rules" :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>
	</view>
</template>
<script>
export default {
	data() {
		return {
			formData:{
				
			},
			rules: {
				hobby: {
					rules: [{
						required: true,
						errorMessage: '请选择兴趣',
					},{
						validateFunction:function(rule,value,data,callback){
							if (value.length < 2) {
								callback('请至少勾选两个兴趣爱好')
							}
							return true
						}
					}]
				}
			}
		}
	},
    // 注意form表单是写了:rules="rules"的
    // 这2种方式都会触发自定义表单验证
	// onReady() {
		// 需要在onReady中设置规则
	    // this.$refs.form.setRules(this.rules)
	// },
	methods: {
		submit(form) {
			this.$refs.form.validate().then(res=>{
				console.log('表单数据信息：', res);
			}).catch(err =>{
				console.log('表单错误信息：', err);
			})
		}
	}
}
</script>

---

总结：

经过这一趟流程下来相信你也对 uni-app uni-forms组件的表单验证 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！

什么不足的地方请大家指出谢谢 -- 風过无痕