效果圖
代碼
<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>經(jīng)驗之談
1. ：model=‘form’
若把form的值設置為 空對象? const form = reactive({? });
控制臺報錯?
?文章來源：http://www.zghlxwxcb.cn/news/detail-725494.html
2.?不能把 prop 寫為name 否則沒有任何效果
文章來源地址http://www.zghlxwxcb.cn/news/detail-725494.html
到了這里，關(guān)于微信小程序/vue3/uview-plus form兜底校驗的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
