1***@qq.com
1***@qq.com
  • 发布:2021-08-22 20:29
  • 更新:2021-08-23 12:10
  • 阅读:2119

[问题已解决] uni-forms表单嵌套uni-data-checkbox做校验时的bug

分类:uni-app

问题已解决。多谢
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>  
2021-08-22 20:29 负责人:DCloud_UNI_HT 分享
已邀请:
DCloud_UNI_HT

DCloud_UNI_HT

更新 uni-data-checkbox 组件,问题已经修复

  • 1***@qq.com (作者)

    多谢多谢!

    2021-08-23 12:26

该问题目前已经被锁定, 无法添加新回复