uni-app 钉钉小程序开发调试中 uniapp-forms 表单验证问题 必填项的日期选择未填值却直接通过验证

uni-app 钉钉小程序开发调试中 uniapp-forms 表单验证问题 必填项的日期选择未填值却直接通过验证

产品分类

uniapp/小程序/阿里

PC开发环境操作系统

Windows

PC开发环境操作系统版本号

win10

HBuilderX类型

正式

HBuilderX版本号

3.2.16

第三方开发者工具版本号

小程序开发者工具

基础库版本号

1.15

项目创建方式

HBuilderX

示例代码

<template>
<view class="container">
<view class="example">
<uni-forms ref="baseForm" :modelValue="baseFormData" :rules="rules" label-position="top">
<uni-forms-item label="组别" required name="classname">
<uni-easyinput v-model="baseFormData.groupName" :disabled="true" placeholder="请输入组别" />
</uni-forms-item>
<uni-forms-item label="班次" required name="shift">
<uni-data-checkbox v-model="baseFormData.shift" :localdata="shifts" />
</uni-forms-item>
<uni-forms-item label="排班日期" required name="range">
<uni-datetime-picker v-model="baseFormData.range" type="daterange" :start="startdate" :end="enddate"
rangeSeparator="至" />
</uni-forms-item>
</uni-forms>
<button type="primary" @click="submit('baseForm')">提交</button>
</view>
</view>
</template> 

<script>
export default {
data() {
const date = new Date()
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
const endyear = date.getFullYear() + 100
const endday = date.getDate() - 1
return {
startdate: year + '-' + month + '-' + day,
enddate: endyear + '-' + month + '-' + endday,
// 基础表单数据
baseFormData: {
groupName: '',
shift: '',
range: [],
},
// 单选数据源
shifts: [{
text: '白班',
value: 1
}, {
text: '晚班',
value: 2
}],
// 表单校验规则
rules: {
groupName: {
rules: [{
required: true,
errorMessage: '组别不能为空'
}]
},
shift: {
rules: [{
required: true,
errorMessage: '请选择班次'
}]
},
range: {
rules: [{
format: 'array'
}, {
validateFunction: function(rule, value, data, callback) {
if (value.length == 0) {
callback('请选择排班日期范围')
}
return true
}
}]
}
},
processId: 0,
group:0,
};
},
onLoad(option) {
this.processId = option.p;
},
onReady() {
this.getClass()
},
methods: {
submit(ref) {
//debugger
this.$refs[ref].validate().then(res => {
debugger
let self = this;
this.$http({
url: this.$api.add_schedul,
method: "post",
data: {
PlanDate: res.range,
Class: res.shift,
GroupName: res.groupName,
Group: self.group,
}
}).then(res => {
if (res.code == 200) {
uni.showToast({
title: res.message,
duration: 2000,
complete() {
uni.navigateBack({
delta: 1
});
}
});
} else {
uni.showToast({
title: res.message,
duration: 2000
});
}
})
uni.showToast({
title: `校验通过`
})
}).catch(err => {
console.log('err', err);
})
},
getClass() {
let self = this;
this.$http({
url: this.$api.get_class,
method: "get",
data: {
LeaderNo: self.$store.state.userinfo.account,
ProcessID: self.processId,
}
}).then(res => {
if (res.code == 200) {
self.baseFormData.groupName = res.data.fname;
self.group = res.data.fid;
} else {
uni.showToast({
title: res.message,
duration: 2000
});
}
})
}
}
</script> 

.example {
padding: 15px;
background-color: #fff;
}

.segmented-control {
margin-bottom: 15px;
}

.button-group {
margin-top: 15px;
display: flex;
justify-content: space-around;
}

.form-item {
display: flex;
align-items: center;
}

.button {
display: flex;
align-items: center;
height: 35px;
margin-left: 10px;
}

操作步骤

上述

预期结果

应该提示必填

实际结果

应该提示必填

bug描述

在浏览器h5验证是没问题，但小程序开发工具里调试，没有填值也能通过必填验证？？？