1. 程式人生 > 其它 >新增行資料校驗

新增行資料校驗

廢話不多說,上程式碼

   rules: {
        fixedLineIdList: [
         {
           required: true,
           validator: lineVerify,
           trigger: "change"
         }
       ]
     }
   },

   // 線路重複校驗
   let lineVerify = (rule, value, callback) => {
     console.log(value);
     console.log(rule.field.match(/timeSlicing\.(\d+)\.fixedLineIdList/));
     if (value.length) {
       const index = rule.field.match(
         /timeSlicing\.(\d+)\.fixedLineIdList/
       )[1];
       let arr = [];
       this.searchForm.timeSlicing.forEach((v, idx) => {
         if (idx != index) {
           arr.push(...v.fixedLineIdList);
         }
       });
       let flag = value.some(v => arr.includes(v));
       if (flag) {
         callback("線路不能重複選擇");
       } else {
         callback();
       }
     } else {
       callback();
     }
   };

這個是校驗的規則

 searchForm: {
        deptId: "",
        timeSlicing: [
          {
            fixedLineIdList: [], //需要校驗的數字
            frequency: ""
          }
        ]
      },

上面為資料的格式,點點選按鈕的時候,searchForm物件中timeSlicing陣列中的物件為一行資料,隨之增加

實現的效果呢,這裡由於牽扯業務機密問題,不予演示,在這裡簡單描述一下,如果有需要直接聯絡本人,

業務場景為點選行增加時新增的下拉框資料(或輸入框),不能和上面的重複,並且如果重複,校驗的提示只能在本行顯示與前面的重複!!!!

在這裡可能有人會說這不就是普通的校驗,我在開始校驗的時候也是和大家一樣,按照正常的方式進行校驗,但現實卻是讓狠狠地打了一巴掌,讓我知道了社會的殘酷,當出現重複的時候會在這個物件相同的所有框提示為重複,根本無法判斷問題出現在哪裡?

所以最後在查閱文件和請教大佬或才得出的這樣的處理方式

通過拿到歷史的資料進行儲存,然後將現在輸的資料進行對比,最重點的是得出當前的輸入的資料是第幾個,然後再顯示!!!