js前端表單資料處理表單資料校驗

2022-07-09 22:01:01

前言

這段時間一直在搞to B方向中後臺的專案，表單接觸的頻率會比較多，就突發奇想聊聊表單資料相關的一些基礎分享

1.資料處理

當表單在檢視所展示的資料並不是後端需要的資料，或者後端返回的資料不是前端所要展示的內容，這時就需要進行資料轉換，下面介紹幾種常見的場景

我假設有下面的一組form基礎資料

 data(){
    return {
      form:{
        name: '商品名稱',
        id: '訂單編號',
        nickName: '商品別名',
        num: '商品數量',
        price:'價格',
        tag: '0' // 1 表示特價  0 表示無特價
      },
    }
 },

1.1 場景1 ：過濾我不要的資料

場景：當前端form中的資料存在冗餘的欄位，也就是說後端並不需要這些欄位，我們可以通過過濾把不必要的欄位篩選掉

  const noRequired = ['tag', 'nickName']; //不需要的欄位
    const formData = Object.keys(this.form)
      .filter(each => !noRequired.includes(each))
      .reduce((acc, key) => (acc[key] = this.form[key], acc), {});

1.2 場景2：只提取我要的資料

場景：後端不需要表單資料那麼多資料，只需要一部分時可以用

const formData= JSON.parse(
      JSON.stringify(this.form,["nickName","price"])
);

1.3 場景3 ：覆蓋資料

場景：當前表單有部分欄位需要替換或覆蓋新的資料時可用

Object.assign(this.form, {
  tag: '商品1' 
}

1.4 場景4 ：欄位對映

當前表單欄位需要對映為其他欄位名稱時可用，如下對應的name的key值換為Name

單個欄位對映情況

const formData = JSON.parse(
      JSON.stringify(this.form).replace(
        /name/g,
        'Name')
);

多欄位對映情況

const mapObj = {
      name: "Name",
      nickName: "NickName",
      tag: "Tag"
    };

const formData = JSON.parse(
      JSON.stringify(this.form).replace(
        /name|nickName|tag/gi,
        matched => mapObj[matched])
   );

ps:這種方式有bug，你知道是什麼嗎？

1.5 場景5 ：資料對映

當欄位存在0，1等狀態數，需要轉換成為相對應的表示時可用，如下對應的tag欄位，0對應特價，1對應無特價，進行對映轉換

const formData = JSON.parse(JSON.stringify(this.form,(key,value)=>{
      if(key == 'tag'){
        return ['特價','無特價'][value];
      }
      return value;
}));

1.6 場景6：資料合併

資料合併，將表單資料欄位合併，注意的是，如果欄位相同，會覆蓋前面表單資料欄位的數值

 const query = { tenaId: '訂單編號', id:'查詢ID'}
   const formData = {
     ...this.form,
     query
   }

2.表單校驗

當表單資料填寫完成，需要進一步做表單提交傳送後端伺服器，但是前端需要做資料的進一步確實是否符合規則，比如是否為必填項、是否為手機號碼格式

2.1 簡單版的單欄位檢查

data() {
    return {
       schema:{
          phone: {
            required:true
          },
       }
    };
 },
 methods: {
    // 判斷輸入的值
     validate(schema, values) {
       for(field in schema) {
          if(schema[field].required) {
            if(!values[field]) {
              return false;
            }
          }
        }
       return true;
    },
 }
console.log(this.validate(schema, {phone:'159195**34'}));

2.2 簡單版的多欄位檢查

data() {
    return {
       phoneForm: {
          phoneNumber: '',
          verificationCode: '',
          tips:''
       },
       schema:{
          phoneNumber: [{required: true, error: '手機不能為空'}, {
            regex: /^1[3|4|5|6|7|8][0-9]{9}$/,
            error: '手機格式不對',
          }],
          verificationCode: [{required: true, error: '驗證碼不能為空'}],
       }
    };
 },
 methods: {
    // 判斷輸入的值
     validate(schema, values) {
      const valArr = schema;
      for (const field in schema) {
        if (Object.prototype.hasOwnProperty.call(schema, field)) {
          for (const key of schema[field]) {
            if (key.required) {
              if (!valArr[field]) {
                valArr.tips = key.error;
                return false;
              }
            } else if (key.regex) {
              if (!new RegExp(key.regex).test(valArr[field])) {
                valArr.tips = key.error;
                return false;
              }
            }
          }
        }
      }
      return true;
    },
 }
console.log(this.validate(this.schema, this.phoneForm);