Validación de formularios para componentes uni-app uni-forms

prefacio

• Al usar el desarrollo uni-app recientemente, al usar el formulario mejorado, la diferencia entre el proceso de usar la verificación de formulario y el lado de la PC
• El documento uni-app dice que si desea utilizar la validación de formularios personalizados, debe eliminar el formulario: rules="rules" y utilizar el enlace de referencia
• Pero al final utilizo validateFunction una regla de validación personalizada, que se activará con los dos métodos anteriores,
• Personalmente, creo que los documentos oficiales son los principales, si :rules="rules" falla y genera errores, la pérdida supera la ganancia.

Documentación

 

<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>

---

Resumir:

Después de este proceso, creo que tiene una impresión profunda preliminar sobre la validación de formularios del componente uni-app uni-forms, pero la situación que encontramos en el desarrollo real es definitivamente diferente, por lo que debemos comprender su principio, permanece en constante cambio. lo mismo. ¡Vamos, golpea a los trabajadores!

Señale cualquier deficiencia, gracias -- Fengguowuhen