微信小程序/vue3/uview-plus form兜底校验-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序/vue3/uview-plus form兜底校验。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

效果图

微信小程序/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>