快捷導(dǎo)航

iView UI FORM 動態(tài)添加表單項校驗規(guī)則寫法實例

更新時間：2023年01月17日 09:44:07 作者：漸行漸遠(yuǎn)

這篇文章主要為大家介紹了iView UI FORM 動態(tài)添加表單項校驗規(guī)則寫法實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

IView UI 表單驗證深入了解

在開發(fā)xxx需求中，有個交互是動態(tài)添加問題項，并需要做表單驗證，在做動態(tài)表單驗證的過程中遇到了問題，記錄下這次是如何解決的。

一直以來對UI框架的form表單驗證只局限于在form 加上 model、rules 、在form-item加上prop，而且要prop要與model、rules的值對應(yīng)，例如:

<template>
 <Form model="questionFormData" :rules="questionRules" refs="questionFormRefs">
    <FormItem prop="question" lable="問題描述">
      <Input v-model="questionFormData.question"></Input>
    </FormItem>
  </Form>
</template>
<script>
  export default {
    data() {
      return {
        questionFormData: {
          question: ''
        },
        questionRules: {
          question: [{
            { required: true, message: "不允許為空", trigger: "blur" },
          }]
        }
      }
    },
    methods: {
      handleSubmit() {
        this.$refs[name].validate(async valid => {
          // valid true驗證通過，false 驗證不通過
      	});
      }
    }
  }
</script>

這里要model="questionFormData"指向?qū)?yīng)數(shù)據(jù)對象，:rules="questionRules"指對應(yīng)規(guī)則，prop="question"指對應(yīng)的表單項的要驗證的key(即questionFormData.question)；以前只知道這么寫就能觸發(fā)驗證規(guī)則，但是具體的原理不太清楚。

這次需要動態(tài)添加表單項，就是循環(huán)渲染FormItem,可問題來了，我要怎么去定義這個prop和rules,帶著疑問，我查了一下iView官網(wǎng)，在FORM下找到對應(yīng)例子

:prop="'items.' + index + '.value'"
:rules="{required: true, message: 'Item ' + item.index +' can not be empty', trigger: 'blur'}"

原來可以動態(tài)添加prop 和rules,只要將prop指向?qū)?yīng)的下標(biāo)即可，重新調(diào)整了一下代碼

<template>
<Form model="questionFormData" :rules="questionRules" refs="questionFormRefs">
    <FormItem 
        v-for="(item, index) of questionFormData.questions"
        :prop="'questions.' + index +'.question'"
        :rules="{required: true, message: '問題' + (index + 1) + '不允許為空', trigger: 'blur'}"
        :lable="'問題' + (index + 1) +'描述"
    >
    <Input v-model="questionFormData.question[index]"></Input>
  </FormItem>
</Form>
</template>
<script>
	export default {
    data() {
      return {
        questionFormData: {
          questions: [{
            id: 1,
            question: '問題1'
          }, {
            id: 2,
            question: '問題2'
          }],
        },
        questionRules: {
        }
      }
    }
  }
</script>

經(jīng)過上面的調(diào)整，動態(tài)表單的驗證也生效了，這里需要注意，prop的值必須是questionFormData的key，即questions.[index].question，如上面的第一項的prop的值questions.0.question，如果換成items.0.question就不生效了。會報[iView warn]: please transfer a valid prop path to form item!,意思是說，prop的值在questionFormData中找不到。

動態(tài)表單的驗證總算解決了，但是對questions.[index].question有些疑問，FormItem是如何識別字符串，并與questionFormData的值關(guān)聯(lián)起來的。帶著問題看一下<FormItem>源碼。

探究原理

找到FormItem源碼，路徑node_modules/view-design/src/components/form/form-item.vue,在源碼中找到答案：

computed: {
  fieldValue () {
    // FormInstance 是當(dāng)前Form的實例，獲取到model，也就是questionFormData
    const model = this.FormInstance.model;
    if (!model || !this.prop) { return; }
		// 此處的prop 就是 questions.0.question
    let path = this.prop;
    // 如果遇到:就替換為點，如questions:0.question -> questions.0.question
    if (path.indexOf(':') !== -1) {
      path = path.replace(/:/, '.');
    }
    // 獲取到questions.0.question在questionFormData的值
    return getPropByPath(model, path).v;
  },
},
function getPropByPath(obj, path) {
  // tempObj = questionFormData
  let tempObj = obj;
  // 將中括號替換為. 如 questions[0][question] -> questions.0.question
  path = path.replace(/\[(\w+)\]/g, '.$1'); 
  // 替換首個.， .questions.0.question -> questions.0.question 最終處理成這個格式
  path = path.replace(/^\./, '');
  // 分割成數(shù)組 得到 ['questions','0','question']
  let keyArr = path.split('.');
  let i = 0;
	// 以 i = 0來查此處代碼作用
  for (let len = keyArr.length; i < len - 1; ++i) {
    // key = questions
    let key = keyArr[i];
    // questions 在 questionFormData中，進(jìn)入為true的代碼塊
    if (key in tempObj) {
      // tempObj = questions
      tempObj = tempObj[key];
    } else {
      throw new Error('[iView warn]: please transfer a valid prop path to form item!');
    }
  }
  return {
    o: tempObj, // { id: 1, question: '問題1' }
    k: keyArr[i], // question
    v: tempObj[keyArr[i]] // 問題1
  };
 }

原來是通過.去分割為數(shù)據(jù)，數(shù)組的值以key的形式去訪問model對象，匹配上對應(yīng)的值。當(dāng)匹配不上值是會拋出'[iView warn]: please transfer a valid prop path to form item!'錯誤。

總結(jié)：通過閱讀源碼，我們可以發(fā)現(xiàn)動態(tài)添加校驗規(guī)則不止可以用key.[index].key的方式，還可以通過[key][index][key]字符串的方式去定義prop，不過要注意**key要與model中的key一致**

以上就是iView UI FORM 動態(tài)添加表單項校驗規(guī)則寫法實例的詳細(xì)內(nèi)容，更多關(guān)于iView UI FORM 表單項校驗規(guī)則的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: