iview 表單提交資料的時候驗證問題

囧囧圖圖發表於2018-07-12
View

問題描述: iview Form表單提交時因資料格式不統一,有寫資料表單裡面含有陣列,驗證出現問題

1, iview表單驗證的步驟

  • 1, Form 標籤裡面需要寫上 ref="FormData" :model="FormData" :rules="ruleValidate"

  • 2, 給需要驗證的每個 FormItem標籤 設定prop="address" 屬性

  • 3, Input標籤裡面是 v-model="address"

  • 4, 在操作儲存按鈕時，新增方法驗證對整個表單進行校驗

this.$refs[name].validate((valid) => {
  if (valid) {
    ...
  }
}
複製程式碼

2, 因為表單資料格式的原因無法正常驗證表單

  • 後端給的需要提交的資料格式如下
// 表單需要提交的資料
  FormData: any = {
    TeacherName: '',
    address: '',  // 老師的地址 需要進行必填欄位驗證
    StudentOne: [
      {
        name: '',
        age: '',
        address: '',
        sex: ''  // 需要進行必填欄位驗證
      }
    ],
    StudentTwo: [
      {
        name: '',
        age: '',
        address: '',
        sex: ''  // 需要進行必填欄位驗證
      }
    ]
  }
複製程式碼

3, 錯誤程式碼如下:

  • html部分程式碼如下
<Form ref="FormData" :model="FormData" :rules="ruleValidate" :label-width="100">
    <!-- 班主任  資訊 -->
    <FormItem label="班主任姓名：" prop="TeacherName">
        <Input v-model="FormData.TeacherName" placeholder="請輸入班主任姓名"></Input>
    </FormItem>
    <FormItem label="班主任地址：" prop="address">
        <Input v-model="FormData.address" placeholder="請輸入班主任地址"></Input>
    </FormItem>
    
    
    <!-- 學生1 資訊 -->
    <FormItem label="學生1姓名：" prop="name">
        <Input v-model="FormData.StudentOne[0].name" placeholder="請輸入學生1的姓名"></Input>
    </FormItem>
    <FormItem label="學生1性別：" prop="sex">
        <Input v-model="FormData.StudentOne[0].sex" placeholder="請輸入學生1的性別"></Input>
    </FormItem>
     <FormItem label="學生1地址：" prop="address">
        <Input v-model="FormData.StudentOne[0].address" placeholder="請輸入學生1地址"></Input>
    </FormItem>
    
    <!-- 學生2 資訊 -->
    <FormItem label="學生2姓名：" prop="name">
        <Input v-model="FormData.StudentTwo[0].name" placeholder="請輸入學生2的姓名"></Input>
    </FormItem>
    <FormItem label="學生2性別：" prop="sex">
        <Input v-model="FormData.StudentTwo[0].sex" placeholder="請輸入學生2的性別"></Input>
    </FormItem>
    <FormItem label="學生2地址：" prop="address">
        <Input v-model="FormData.StudentTwo[0].address" placeholder="請輸入學生2地址"></Input>
    </FormItem>
</Form>
複製程式碼
  • 驗證規則程式碼如下
ruleValidate: any = {
    // 如果html程式碼如上,這個驗證規則的情況下是三個地址都會驗證的,是哪個地址都成了必填項
    // 但是我們現在只需要必填老師的地址, 而兩個學生的地址是不必填的
    // 並且這樣性別是驗證不到的
   address: [
      { required: true, message: '請輸入班主任地址', trigger: 'blur' }
   ],
   sex: [
      { required: true, message: '請輸入學生1性別', trigger: 'blur' }
   ]
}
複製程式碼

4, 正確程式碼如下:

  • html部分程式碼如下
<Form ref="FormData" :model="FormData" :rules="ruleValidate" :label-width="100">
    <!-- 班主任  資訊 -->
    <FormItem label="班主任姓名：" prop="editName">
        <Input v-model="FormData.editName" placeholder="請輸入班主任姓名"></Input>
    </FormItem>
    <FormItem label="班主任地址：" prop="address">
        <Input v-model="FormData.address" placeholder="請輸入班主任地址"></Input>
    </FormItem>
    
    
    <!-- 學生1 資訊 -->
    <FormItem label="學生1姓名：" prop="StudentOne[0].name">
        <Input v-model="FormData.StudentOne[0].name" placeholder="請輸入學生1的姓名"></Input>
    </FormItem>
    <FormItem label="學生1性別：" prop="StudentOne[0].sex">
        <Input v-model="FormData.StudentOne[0].sex" placeholder="請輸入學生1的性別"></Input>
    </FormItem>
     <FormItem label="學生1地址：" prop="StudentOne[0].address">
        <Input v-model="FormData.StudentOne[0].address" placeholder="請輸入學生1地址"></Input>
    </FormItem>
    
    <!-- 學生2 資訊 -->
    <FormItem label="學生2姓名：" prop="StudentTwo[0].name">
        <Input v-model="FormData.StudentTwo[0].name" placeholder="請輸入學生2的姓名"></Input>
    </FormItem>
    <FormItem label="學生2性別：" prop="sex">
        <Input v-model="FormData.StudentTwo[0].sex" placeholder="請輸入學生2的性別"></Input>
    </FormItem>
    <FormItem label="學生2地址：" prop="address">
        <Input v-model="FormData.StudentTwo[0].address" placeholder="請輸入學生2地址"></Input>
    </FormItem>
</Form>
複製程式碼
  • 驗證規則程式碼如下
ruleValidate: any = {
   address: [
      { required: true, message: '請輸入班主任地址', trigger: 'blur' }
   ],
   'StudentOne[0].sex': [
      { required: true, message: '請輸入學生1性別', trigger: 'blur' }
   ],
   'StudentTwo[0].sex': [
      { required: true, message: '請輸入學生2性別', trigger: 'blur' }
   ]
}
複製程式碼

備註:

1, 如果提交表單物件裡面含有陣列層級關係, 需要在prop裡面寫出來這個層級關係

prop="TeacherName" ( FormData下面的資料 )
prop="StudentTwo[0].name" (FormData 下面陣列裡面的資料 )
複製程式碼

2, 同時在驗證的時候也需要寫成層級關係,並且加上引號,如果不加引號會報錯

驗證關係裡面需要這樣寫-----> 'StudentOne[0].sex'
複製程式碼

相關文章