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

效果图

代码

 
<script setup lang="ts">
    import { reactive, ref } from 'vue';
    const formRole = ref(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 否则没有任何效果