问题已解决。多谢
0.2.5(2021-08-23)
修复 在uni-forms中 modelValue 中不存在当前字段,当前字段必填写也不参与校验的问题
辛苦了!
请注意formData
中的isConfirm: [],
如果删掉该行,表单无法校验未选性别的情况。
如果保留该行,则可以校验性别未选。(如下图一图二)
背景:
用uniapp开发混合APP。我需要开发两个相似的表单,只不过表单一比表单二多了一个多选框。开发表单二的过程中,我选择以表单一为基础,删掉多选框对应的校验属性即可。而此时,我发现isConfirm: [],
必须保留,如果不保留的话无法校验性别未选。
求大佬指点!!!多谢!!!
<template>
<view class="writeInfo">
<view class="basicForm">
<uni-forms
ref="writeInfoForm"
:modelValue="formData"
:rules="rules"
class="uniForms"
>
<uni-forms-item label="姓名" name="name" class="uniItems">
<uni-easyinput
type="text"
v-model="formData.name"
placeholder="请输入姓名"
/>
</uni-forms-item>
<uni-forms-item label="性别" name="sex" class="uniItems">
<uni-data-checkbox
v-model="value"
:localdata="range"
@change="handleSexValue"
>
</uni-data-checkbox>
</uni-forms-item>
</uni-forms>
<button @click="submitForm">提交审核</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
value: undefined,
range: [
{
value: 1,
text: "男",
},
{
value: 2,
text: "女",
},
],
// 表单数据
formData: {
name: undefined,
sex: undefined,
// 奇怪的报错
isConfirm: [],
},
// 规则
rules: {
name: {
rules: [
{
required: true,
errorMessage: "*请填写完整信息",
},
{
validateFunction: function (rule, value, data, callback) {
let nameReg =
/^[\u4E00-\u9FA5A-Za-z\s]+(·[\u4E00-\u9FA5A-Za-z]+)*$/;
if (!nameReg.test(value)) {
callback("姓名格式不正确,请重新输入");
}
return true;
},
},
],
},
sex: {
rules: [
{
required: true,
errorMessage: "*请选择性别",
},
],
},
},
};
},
onReady() {
// 需要在onReady中设置规则
this.$refs.writeInfoForm.setRules(this.rules);
},
methods: {
handleSexValue(e) {
this.sex = e.detail.value;
console.log("this.sex: ", this.sex);
},
submitForm() {
this.$refs.writeInfoForm
.validate()
.then((res) => {
console.log("表单数据信息:", res);
})
.catch((err) => {
console.log("表单错误信息:", err);
});
},
},
};
</script>
<style lang="less" scoped>
.writeInfo {
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
align-items: center;
.basicForm {
height: 85vh;
padding-left: 2%;
margin-top: 5%;
width: 90vw;
.uniForms {
.uniItems {
margin-bottom: 20rpx;
}
}
}
}
</style>
1***@qq.com (作者)
多谢多谢!
2021-08-23 12:26