zxs
zxs
  • 发布:2022-08-16 18:50
  • 更新:2022-12-09 16:37
  • 阅读:2044

微信小程序uni-forms表单验证提交必填验证返回成了提交的字段在数据库不存在

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 3.5.3

第三方开发者工具版本号: 1.06.2208010

基础库版本号: 2.25.2

项目创建方式: HBuilderX

操作步骤:
 this.$refs.form.validate().then((res) => {  

        }).catch(() => {  
        }).finally(() => {  

        })

预期结果:

返回XX属性必填

实际结果:

提交的字段["xxxxxx"]在数据库中并不存在

bug描述:

小程序端项目运行在微信开发者工具时,页面初始时通过 this.$refs.form.setRules(this.rules) 设置的必填验证规则

 onReady() {  
      this.$refs.form.setRules(this.rules)  
    },

在点击提交前 通过this.$refs.form.validate() 验证表单时,由于un-forms组件的validate.js中 SchemaValidator类的_checkFieldInSchema方法里面 this._schema 变量,在微信小程序端和网页端的输出结果的不同,给出了不同的验证结果提示

 this.$refs.form.validate().then((res) => {  
          // return this.submitForm(res)  
        }).catch(() => {  
        }).finally(() => {  
          uni.hideLoading()  
        })
2022-08-16 18:50 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com

解决了吗?

  • zxs (作者)

    uni-forms 要设置 :rules="firstRules" onReady li里面同时 this.$refs.firstForm.setRules(this.firstRules);

    2022-09-21 14:55

  • 2***@qq.com

    回复 zxs: 解决了,这是uni-forms的bug

    2022-12-09 16:39

w***@163.com

w***@163.com

同样的问题~~解决了么?

  • zxs (作者)

    uni-forms 要设置 :rules="firstRules" onReady li里面同时 this.$refs.firstForm.setRules(this.firstRules);

    2022-09-21 14:55

  • 2***@qq.com

    解决了,这是uni-forms的bug

    2022-12-09 16:39

3***@qq.com

3***@qq.com

建议 Hbuilderx 升级时 schema2code 生成时自动加上!

  • 3***@qq.com

    能解决 !

    2022-11-12 18:12

  • 2***@qq.com

    解决了,这是uni-forms的bug

    2022-12-09 16:39

  • 2***@qq.com

    回复 3***@qq.com: 解决了,这是uni-forms的bug

    2022-12-09 16:39

2***@qq.com

2***@qq.com

看了uni-forms的源码,它的validate.js中,_checkFieldInSchema 方法的 this._schema 变量的key,来自于 页面 this.$refs.form.setRules(submitRules) 的key;
所以,我在submitRules中,给了完整表单的key.
另外,uni-forms-item如果放到slot中,会丢失。我的做法是:

 <uni-forms ref="form" :model-value="formData" label-position="top" err-show-type="toast">  
      <view style="display: none">  
        <uni-forms-item name="id"></uni-forms-item>  
        <uni-forms-item name="status"></uni-forms-item>  
        <uni-forms-item name="project_id"></uni-forms-item>  
        <uni-forms-item name="dateTypeIndex"></uni-forms-item>  
        <uni-forms-item name="project_no"></uni-forms-item>  
        <uni-forms-item name="tag_name"></uni-forms-item>  
        <uni-forms-item name="introduction"></uni-forms-item>  
        <uni-forms-item name="cover_photo"></uni-forms-item>  
        <uni-forms-item name="area_list"></uni-forms-item>  
        <uni-forms-item name="initiate_times_flag"></uni-forms-item>  
        <uni-forms-item name="initiate_explain"></uni-forms-item>  
        <uni-forms-item name="activity_explain"></uni-forms-item>  
        <uni-forms-item name="pre_investment"></uni-forms-item>  
        <uni-forms-item name="customer_form"></uni-forms-item>  
        <uni-forms-item name="project_detail"></uni-forms-item>  
        <uni-forms-item name="project_name"></uni-forms-item>  
        <uni-forms-item name="project_territory"></uni-forms-item>  
        <uni-forms-item name="activity_end_date"></uni-forms-item>  
        <uni-forms-item name="initiate_number"></uni-forms-item>  
      </view>  
  <!-- more....-->
// vuejs中  
const RULE_KEYS = {  
  project_id: {},  
  project_territory: {},  
  project_no: {},  
  status: {},  
  pre_investment: {},  
  investment_from: {},  
  introduction: {},  
  project_detail: {},  
  project_detail_data: {},  
  area_list: {},  
  activity_end_date: {},  
  initiate_number: {},  
  initiate_times_flag: {},  
  initiate_explain: {},  
  activity_explain: {},  
  cover_photo: {},  
  activity_begin_date: {},  
  tag_name: {},  
  customer_form: {},  
};  

data(){  
return {  
submitRules: {  
        ...RULE_KEYS,  
        project_name: PROJECT_NAME_RULE(),  
        project_territory: REQUIRED('请选择项目领域'),  
        project_no: REQUIRED('请填写项目编号'),  
        pre_investment: REQUIRED('请填写项目预投入金额', {  
          validateFunction: function (rule, value, data, callback) {  
            let flag = isMoney(value);  
            console.log('项目预投入金额', value, flag);  
            if (!flag) {  
              callback('请正确填写项目预投入金额');  
            }  
          },  
        }),  
       // more......  
   }  
}  // more .... 

要回复问题请先登录注册