快捷導(dǎo)航

vue elementUI 表單校驗的實現(xiàn)代碼（多層嵌套）

更新時間：2019年11月06日 14:15:07 作者：陽呀呀

這篇文章主要介紹了vue elementUI 表單校驗的實現(xiàn)代碼（多層嵌套），文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

嵌套對象的校驗

項目中使用的vue+elementUI進(jìn)行開發(fā)，已經(jīng)用了有一段時間了，感覺表單校驗是每一個前端開發(fā)人員都避免不了的需求。在一些前端可以自行校驗的情況下，先通過前端校驗，校驗不通過不發(fā)送請求，直到滿足校驗規(guī)則，再發(fā)送請求給后端，從而提升用戶體驗。

elementUI對表單的校驗有自己的方法，要求傳入model的必須為一個對象。但如果數(shù)據(jù)結(jié)構(gòu)比較復(fù)雜，對象里面又嵌套對象，該如何校驗？本文給出多層對象嵌套的方法。

example

<template>
 <el-form :model="formData" :rules="formRule" ref="formData" label-width="100px">
    <el-form-item prop="name" label="姓名">
      <el-input v-model="formData.name" ></el-input>
    </el-form-item>
    <el-form-item prop="password" label="密碼">
     <el-input v-model="formData.password" ></el-input>
    </el-form-item>
    <el-form-item prop="user.tel" label="手機(jī)號" >
     <el-input v-model="formData.user.tel" ></el-input>
    </el-form-item>
    <el-form-item prop="phones[0].model" label="手機(jī)號">
     <el-input v-model="formData.phones[0].model"></el-input>
    </el-form-item>
    <el-form-item v-for="(phone, index) in formData.phones" :label="phone.brand" :key="phone.brand" :prop="'phones.' + index + '.model'" :rules="{
     required: true, message: 'model不能為空', trigger: 'blur'
     }">
      <el-input v-model="phone.model"></el-input>
      <el-form :model="formData.phones[index]" label-width="100px">
         <el-form-item v-for="(item, index1) in formData.phones[index].arr" :key="index1" :prop="'arr.' + index1 + '.data1'" label="data1" :rules="{
         required: true, message: 'data1不能為空', trigger: 'blur'
         }">
           <el-input v-model="item.data1"></el-input>
         </el-form-item>
      </el-form>
    </el-form-item>
  </el-form>
  <el-button @click="handleSubmit">提交</el-button>  
</template>

data () {
  return {
   formData:{
     name: '',
     password: '',
     user: {
       tel: ''
     },
      phones: [
       { brand: "華為", model: "", arr: [{ data1: "" }] },
       { brand: "小米", model: "", arr: [{ data1: "" }] }
     ] 
   },
   formRule:{
    name: [{required: true, message: '不能為空', trigger: 'blur'},
        {pattern: /^[\u4E00-\u9FA5]+$/, message: '用戶名只能為中文', trigger: 'blur'}],
    password: [{required: true, message: '不能為空', trigger: 'blur'},
     {validator: Verify.validatePassword, trigger: 'blur'},
    ],
    'user.tel' : [{required: true, message: '手機(jī)號碼不能為空', trigger: 'blur'}],
    'phones[0].model': [{required: true, message: 'model不能為空', trigger: 'blur'}],
   },
  }
 },

methods: {
  handleSubmit(){
    const t = this;
    t.$refs['formData'].validate((valid) => {
      if(valid){
       console.log(this.formData);
      }
    })
  }
 }

校驗方法

model綁定的formData中內(nèi)層user也是一個對象，現(xiàn)在想要對tel進(jìn)行校驗，在prop中傳遞user.tel，并且在rules中也要指定user.tel即可。

對于子對象里面又嵌套數(shù)組的數(shù)據(jù)結(jié)構(gòu)，如果想校驗數(shù)組里的元素，需要在寫一層form，用子對象作為新form表單再重新走一遍流程即可，具體例子請看上面的代碼

對于驗證規(guī)則，可以通過pattern或者validator來實現(xiàn)，pattern里面可以直接寫正則表達(dá)式，不知道為啥文檔中沒有提到這點。之前的驗證一般都是通過validator來實現(xiàn)的，驗證方法單獨寫在一個文件中，這樣可以做到整個項目公用，用到時只需通過import引一下即可。

校驗效果