微信小程序/vue3/uview-plus form兜底校验

效果图

代码

<template><u-form :model="form" ref="formRole" :rules="rules"><u-form-item prop="nickname"><u-input v-model="form.nickname" placeholder="姓名" border="none" /></u-form-item><u-form-item prop="password"><u-input v-model="form.password" placeholder="密码" border="none" /></u-form-item><button @click="submit" class="btn">提交</button></u-form>
</template><script setup lang="ts">import { reactive, ref } from 'vue';const formRole = ref<any>(null);const rules = {'password': {type: 'string',required: true,message: '请输入密码',trigger: ['blur', 'change'],},'nickname': {type: 'string',required: true,message: '请输入名称',trigger: ['blur', 'change'],}}const form = reactive({nickname: null,password: null,});const submit = () => {console.log(formRole.value, 'formRole.value');formRole.value.validate().then(res => {// uni.$u.toast('校验通过')console.log(res, '成功');// return}).catch(err => {console.log(err, '校验失败');// return})};
</script>

经验之谈

1. ：model=‘form’

若把form的值设置为 空对象  const form = reactive({  });

控制台报错 

 

2. 不能把 prop 写为name 否则没有任何效果