- 在uni-forms-item上设置rules校验规则无效，结果为【校验不通过】
<template>
<view class="content">
<uni-section title="测试" sub-title="" type="line" padding="0px 20px">
<uni-forms ref="selfOrderFormRef" :model="selfOrder" label-position="top" validate-trigger="blur">
<uni-forms-item label="诉求目的" label-align="left" name="目的" required :rules="[{required: true, errorMessage: '请填写诉求目的'}]">
<uni-easyinput v-model="selfOrder.appealPurpose" placeholder="请填写目的" type="textarea" maxlength="50" autoHeight />
</uni-forms-item>
<uni-forms-item label="诉求" name="诉求" required :rules="[{required: true, errorMessage: '请填写您的诉求'}]">
<uni-easyinput v-model="selfOrder.appealMine" placeholder="请填写您的" type="textarea" maxlength="1000" autoHeight/>
</uni-forms-item>
<uni-forms-item label="现场照片" name="现场照片" required :rules="[{required: true, errorMessage: '请上传现场照片'}]">
<uni-file-picker v-model="selfOrder.pics" limit="5" file-mediatype="image"></uni-file-picker>
</uni-forms-item>
<uni-forms ref="selfOrderChildrenFormRef" label-position="left" label-width="7em" validate-trigger="blur">
<uni-forms-item label="址" name="地址" required :rules="[{required: true, errorMessage: '请填写详细的地址'}]">
<uni-easyinput v-model="selfOrder.address" placeholder="请填写详细的地址" type="text">
<button class="button-right-mini" slot="right" type="default" size="mini" @click.stop="onClickLocation">
定位
<uni-icons type="location" color="white" size="13"></uni-icons>
</button>
</uni-easyinput>
</uni-forms-item>
<uni-forms-item label="联系人" name="联系人" required :rules="[{required: true, errorMessage: '请填写联系人'}]">
<uni-easyinput v-model="selfOrder.contacts" placeholder="请填写联系人" type="text" input-align="center"/>
</uni-forms-item>
<uni-forms-item label="联系电话" name="联系电话" required :rules="[{required: true, errorMessage: '请填写联系电话', pattern: '^1[3456789]\\d{9}$'}]">
<uni-easyinput v-model="selfOrder.contactPhone" placeholder="请填写联系电话" type="digit" maxlength="11"/>
</uni-forms-item>
<uni-forms-item label="验证码" name="验证码" required :rules="[{required: true, errorMessage: '请填写验证码'}]">
<uni-easyinput v-model="selfOrder.code" placeholder="请填写验证码" type="digit">
<button class="button-right-mini" slot="right" type="default" size="mini" @click.stop="onClickCode">
发送
<uni-icons type="chat" size="13" color="white"></uni-icons>
</button>
</uni-easyinput>
</uni-forms-item>
<uni-forms-item label="是否允许联系" name="是否允许联系" :rules="[{required: false, errorMessage: '请选中是否允许联系'}]">
<uni-data-checkbox mode="tag" v-model="selfOrder.allowContact" :multiple="false" :localdata="isOrNot"/>
</uni-forms-item>
<button class="custom_default_button" type="default" style="margin: 2em 0 1em 0; color: white;" @click="onsubmit('selfOrder')">提交</button>
</uni-forms>
</uni-forms>
</uni-section>
</view>
</template>
<script>
import { onMounted, reactive, ref } from 'vue';
import { onPageScroll } from '@dcloudio/uni-app'
import CustomHeadBar from '../../components/CustomHeadBar/CustomHeadBar.vue';
export default {
components: {
CustomHeadBar
},
setup() {
// 诉求
const selfOrderFormRef = ref()
const selfOrderChildrenFormRef = ref()
const selfOrder = reactive({
appealPurpose: '', // 目的
appealMine: '', // 诉求
address: '', // 地址
pics: [], // 现场照片
contacts: '', // 联系人
contactPhone: '', // 联系电话
code: '', // 验证码
allowContact: 0 // 是否允许联系
})
const isOrNot = reactive([
{text: '是', value: 0},
{text: '否', value: 1},
])
// 主题下单点击grid
const changeGrid = ({detail: {index}}) => {
const tmp = themeOrder[index]
if (!tmp || !tmp.url) {
uni.showToast({
title: '待开发',
icon: 'none'
})
return
}
uni.navigateTo({
url: tmp.url
})
}
// 选择位置
const onClickLocation = () => {
uni.showToast({
title: '待开发',
icon: 'none'
})
}
// 获取验证码
const onClickCode = () => {
uni.showToast({
title: '待开发',
icon: 'none'
})
}
// 表单提交
const onsubmit = (type) => {
console.log('表单提交', type);
if (type === 'selfOrder') { // 自助下单
selfOrderSubmit()
}
}
// 自助下单提交
const selfOrderSubmit = () => {
if (!selfOrderFormRef.value) return
selfOrderFormRef.value.validate().then(res => {
uni.showToast({
title:'验证通过',
icon: 'none'
})
// selfOrderChildrenFormRef.value.validate().then(r => {
// uni.showToast({
// title:'验证通过',
// icon: 'none'
// })
// // TODO 提交数据
// }).catch(e => {
// console.log('表单验证不通过', e);
// uni.showToast({
// title: '表单验证不通过',
// icon: 'none'
// })
// })
}).catch(err => {
console.log('表单验证不通过', err);
uni.showToast({
title: '表单验证不通过',
icon: 'none'
})
})
}
onPageScroll((e) => {
uni.$emit('onPageScroll', e.scrollTop)
})
return {
// data
selfOrder,
isOrNot,
selfOrderFormRef,
selfOrderChildrenFormRef,
// methods
changeGrid,
onClickLocation,
onClickCode,
onsubmit,
}
}
}
</script>
<style lang="less">
page {
// background-color: #eee;
}
.content {
display: flex;
flex-direction: column;
.grid-item-box {
flex: 1;
// position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px 0;
&__icon {
width: 60%;
aspect-ratio: 1;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20%;
.iconfont {
font-size: 24px;
}
}
}
.button-right-mini {
background: linear-gradient(45deg, #00d6bf, #00b1f1);
color: white;
font-size: 12px;
margin-right: 3px;
padding: 0px 10px;
}
.checklist-group {
justify-content: flex-end;
}
.uni-data-checklist .checklist-group .checklist-box.is--tag.is-checked {
background: linear-gradient(45deg, #00d6bf, #00b1f1);
border-color: #00d6bf;
}
}
</style>
- 在uni-forms上设置rules校验规则无效，结果为【校验通过】
<template>
<view class="content">
<uni-section title="测试测试" sub-title="" type="line" padding="0px 20px">
<uni-forms ref="selfOrderFormRef" :rules="selfOrderRules" :model="selfOrder" label-position="top" validate-trigger="blur">
<uni-forms-item label="目的" name="目的" required>
<uni-easyinput v-model="selfOrder.appealPurpose" placeholder="请填写目的" type="textarea" maxlength="50" autoHeight />
</uni-forms-item>
<uni-forms-item label="诉求" name="诉求" required>
<uni-easyinput v-model="selfOrder.appealMine" placeholder="请填写您的诉求" type="textarea" maxlength="1000" autoHeight/>
</uni-forms-item>
<uni-forms-item label="现场照片" name="现场照片" required>
<uni-file-picker v-model="selfOrder.pics" limit="5" file-mediatype="image"></uni-file-picker>
</uni-forms-item>
<uni-forms ref="selfOrderChildrenFormRef" :rules="selfOrderChildrenRules" :model="selfOrderChildren" label-position="left" label-width="7em" validate-trigger="blur">
<uni-forms-item label="地址" name="地址" required>
<uni-easyinput v-model="selfOrderChildren.address" placeholder="请填写详细的地址" type="text">
<button class="button-right-mini" slot="right" type="default" size="mini" @click.stop="onClickLocation">
定位
<uni-icons type="location" color="white" size="13"></uni-icons>
</button>
</uni-easyinput>
</uni-forms-item>
<uni-forms-item label="联系人" name="联系人" required>
<uni-easyinput v-model="selfOrderChildren.contacts" placeholder="请填写联系人" type="text" input-align="center"/>
</uni-forms-item>
<uni-forms-item label="联系电话" name="联系电话" required>
<uni-easyinput v-model="selfOrderChildren.contactPhone" placeholder="请填写联系电话" type="digit" maxlength="11"/>
</uni-forms-item>
<uni-forms-item label="验证码" name="验证码" required>
<uni-easyinput v-model="selfOrderChildren.code" placeholder="请填写验证码" type="digit">
<button class="button-right-mini" slot="right" type="default" size="mini" @click.stop="onClickCode">
发送
<uni-icons type="chat" size="13" color="white"></uni-icons>
</button>
</uni-easyinput>
</uni-forms-item>
<uni-forms-item label="是否允许联系" name="是否允许联系">
<uni-data-checkbox mode="tag" v-model="selfOrderChildren.allowContact" :multiple="false" :localdata="isOrNot"/>
</uni-forms-item>
<button class="custom_default_button" type="default" style="margin: 2em 0 1em 0; color: white;" @click="onsubmit('selfOrder')">提交</button>
</uni-forms>
</uni-forms>
</uni-section>
</view>
</template>
<script>
import { getCurrentInstance, onMounted, reactive, ref } from 'vue';
import { onPageScroll } from '@dcloudio/uni-app'
import CustomHeadBar from '../../components/CustomHeadBar/CustomHeadBar.vue';
export default {
components: {
CustomHeadBar
},
setup() {
// 诉求
const selfOrderFormRef = ref()
const selfOrderChildrenFormRef = ref()
const selfOrder = reactive({
appealPurpose: '', // 目的
appealMine: '', // 诉求
pics: [], // 现场照片
})
const selfOrderRules = reactive({
appealPurpose: {
rules: [
{required: true, errorMessage: '请填写'}
]
},
appealMine: {
rules: [
{required: true, errorMessage: '请填写'}
]
},
pics: {
rules: [
{required: true, errorMessage: '请上传现场照片'},
{format: 'array'}
]
}
})
const selfOrderChildren = reactive({
address: '', // 地址
contacts: '', // 联系人
contactPhone: '', // 联系电话
code: '', // 验证码
allowContact: 0 // 是否允许联系
})
const selfOrderChildrenRules = reactive({
address: {
rules: [
{required: true, errorMessage: '请填写详细的地址'}
]
},
contacts: {
rules: [
{required: true, errorMessage: '请填写联系人'}
]
},
contactPhone: {
rules: [
{required: true, errorMessage: '请填写联系电话'},
{pattern: '^1[3456789]\\d{9}$'}
]
},
code: {
rules: [
{required: true, errorMessage: '请填写验证码'}
]
},
allowContact: {
rules: [
{required: false, errorMessage: '请选择是否允许联系'}
]
}
})
const isOrNot = reactive([
{text: '是', value: 0},
{text: '否', value: 1},
])
// 选择位置
const onClickLocation = () => {
uni.showToast({
title: '待开发',
icon: 'none'
})
}
// 获取验证码
const onClickCode = () => {
uni.showToast({
title: '待开发',
icon: 'none'
})
}
// 表单提交
const onsubmit = (type) => {
if (type === 'selfOrder') { // 自助下单
selfOrderSubmit()
}
}
// 自助下单提交
const selfOrderSubmit = () => {
if (!selfOrderFormRef.value) return
selfOrderFormRef.value.validate().then(res => {
selfOrderChildrenFormRef.value.validate().then(r => {
uni.showToast({
title:'验证通过',
icon: 'none'
})
// TODO 提交数据
}).catch(e => {
console.log('表单验证不通过', e);
uni.showToast({
title: '表单验证不通过',
icon: 'none'
})
})
}).catch(err => {
console.log('表单验证不通过', err);
uni.showToast({
title: '表单验证不通过',
icon: 'none'
})
})
}
return {
// data
selfOrder,
selfOrderRules,
selfOrderChildren,
selfOrderChildrenRules,
isOrNot,
selfOrderFormRef,
selfOrderChildrenFormRef,
// methods
onClickLocation,
onClickCode,
onsubmit,
}
}
}
</script>
<style lang="less">
page {
// background-color: #eee;
}
.content {
display: flex;
flex-direction: column;
.grid-item-box {
flex: 1;
// position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px 0;
&__icon {
width: 60%;
aspect-ratio: 1;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20%;
.iconfont {
font-size: 24px;
}
}
}
.button-right-mini {
background: linear-gradient(45deg, #00d6bf, #00b1f1);
color: white;
font-size: 12px;
margin-right: 3px;
padding: 0px 10px;
}
.checklist-group {
justify-content: flex-end;
}
.uni-data-checklist .checklist-group .checklist-box.is--tag.is-checked {
background: linear-gradient(45deg, #00d6bf, #00b1f1);
border-color: #00d6bf;
}
}
</style>
