嵌套對象的校驗(yàn)

目前創(chuàng)新互聯(lián)已為1000+的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)絡(luò)空間、網(wǎng)站運(yùn)營、企業(yè)網(wǎng)站設(shè)計(jì)、泰來網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

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

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

example

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);
      }
    })
  }
 }

校驗(yàn)方法

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

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

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

校驗(yàn)效果

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。