表单动态自定义校验以及数据多层嵌套

小王同学要好学

已于 2024-04-22 13:05:06 修改

阅读量272

点赞数 5

文章标签：前端 uniapp vue.js

于 2024-04-22 12:39:07 首次发布

本文链接：https://blog.csdn.net/m0_63084496/article/details/138070544

版权

一、前提

使用uniapp,uni-form，数据多层嵌套，并且需要表单动态自定义校验

我的数据，表单动态自定义效验部分是OrderInfo.data.repayment.instalment

const  OrderInfo=reactive({
  data:{
  number: "", // 订单编
  status: 0, // 0 意向订单，1 成交待收，2 已经完成
   ty: "", // 订单类型，下拉字段
    // 交易时间，空字符代表还没有成交，status为1，2时必须设置
   transaction_date: "", 
   receipt_account: "", // 收款账户, 这个先放着不管
   payment_method: "", // 收款方式，下拉字段
  product: {
     id: "",
    name: "",
    discount: "", // 折扣，用浮点数保存，最大值为1，表示没有折扣
    amount: 0 ,// 数量  
    price:""
  },
  customer: {
     id: "",
    name: "",
    company:"",
    address: "", // 收货地址,
    purchase_unit: "" // 购买单位
  },
  salesman: {
  id:userStore.info.id,
  name:userStore.info.name
  },
  repayment: {
    model: 0, // 0 全款，1 分期付款
    instalment: [ // 所有original_amount加起来要等于产品总金额乘以折扣
        {
          interest: "", 
          original_amount: "", 
          date: "", // 回款日期，必须设置
         finish: false, 
        }
        ]
  },
  ship: { 
         shipped: false, // 是否已发货
         date: "",
         storehouse: "", // 发货库房
     },
invoice: {
      required: false, //是否开发票，如果为false忽略下面值
      deadline: "", // 收款期限
      title: "", // 发票抬头
      ty:"",
      number: "", // 发票编号，不设置系统自动生成，唯一值
      description: "" // 财务说明
  }
},
    file:''
  })

二、步骤

1.首先先定义实例和规则

const form=ref(null)

//监听必填的内容
const orderRules={
  discount: {
  	rules: [
  		{
  			required: true,
  			trigger: 'change',
  			errorMessage: '折扣必填'
  		},
  		{
  			validateFunction(rule, value, data, callback) {
        
  				    const numericValue = parseFloat(value);
  				    if (isNaN(numericValue) || numericValue < 0 || numericValue > 1) {
  				        callback('数字必须在0到1之间');
  				    }
  				    if (value && value.includes('.') && value.split('.')[1].length > 2) {
  				        callback('销售单价最多有两位小数');
  				    }
  				    return true;
  			},
  			trigger: 'change'
  		}
  	]
  },
  other:{
    rules: [
    	{
    		required: true,
    		trigger: 'change',
    		errorMessage: '必填'
    	},
    	{
    		validateFunction(rule, value, data, callback) {
    			  if(value&&value.length<=0){
    			    callback("不能为空")
    			  }
    			    return true;
    		},
    		trigger: 'change'
    	}
    ]
  },
  others:{
    rules: [
    	{
    		required: `${OrderInfo.data.status===0?false:true}`,
    		trigger: 'change',
    		errorMessage: '必填'
    	},
    	{
    		validateFunction(rule, value, data, callback) {
          if(OrderInfo.data.status===0){
             return true;
           }
          
    			  if(value&&value.length<=0){
    			    callback("不能为空")
    			  }
    			    return true;
    		},
    		trigger: 'change'
    	}
    ]
  },
  interest_0: {
   	rules: [
   		{
   			required: true,
   			trigger: 'change',
   			errorMessage: '利息必填'
   		},
   		{
   			validateFunction(rule, value, data, callback) {
   				    const numericValue = parseFloat(value);
   				    if (isNaN(numericValue) || numericValue < 0 || numericValue > 1) {
   				        callback('数字必须在0到1之间');
   				    }
   				    if (value && value.includes('.') && value.split('.')[1].length > 2) {
   				        callback('销售单价最多有两位小数');
   				    }
   				    return true;
   			},
   			trigger: 'change'
   		}
   	]
   },
  date_0: {
   	rules: [
   		{
   			required: true,
   			trigger: 'change',
   			errorMessage: '日期必填'
   		},
   		{
   			validateFunction(rule, value, data, callback) {
   				 if(value&&value.length<=0){
              callback("回款日期不能为空")
            }
   				    return true;
   			},
   			trigger: 'change'
   		}
   	]
   },
   original_amount_0: {
   	rules: [
   		{
   			required: true,
   			trigger: 'change',
   			errorMessage: '回款金额必填'
   		},
   		{
   			validateFunction(rule, value, data, callback) {
   				 if(value&&value.length<=0){
              callback("回款日期不能为空")
            }
   				    return true;
   			},
   			trigger: 'change'
   		}
   	]
   },
}

2.在组件中绑定实例和数据

3.在需要的项目中确定规则和写上name

部分

动态表单部分

4.把规则和实例绑定

5.最后在提取表单的方法中使用实例

三、查看问题

如果出现问题的话，可以console.log(form.value)去查看一下看是否绑定formData和formRules是否有绑定，动态表单校验应该是触发了才绑定的这部分我使用v-if满足条件才渲染，所以以下图片没有这个信息，但是我的效验没问题

我遇到的问题是：formData里面的值找不到绑定数据，就显示undefined，然后导致校验不了。出问题部分是 :name="['product','amount']" 的时候，一开始我还是单纯的name="amount"，但是由于数据太多了不唯一没有绑定上，改成了这种命名:name="['product','amount']" 就可以了绑定了

：：：：不明白的可以看uniapp官网