需求，使用的是iview框架的Form組件，一般簡單input類型數(shù)據(jù)，使用簡單的驗證配置就可以達(dá)到效果。如官方的寫法。

iview 表單驗證 地址 https://www.iviewui.com/components/form
iview 默認(rèn)驗證庫 async-validator 地址 https://github.com/yiminghe/async-validator

ruleValidate: {name: [{ required: true, message: 'The name cannot be empty', trigger: 'blur' }] }

但是如果要驗證數(shù)組、或者其他復(fù)雜類型的表單數(shù)據(jù)，就需要自定義驗證方法。下面以驗證DatePicker組件為例。

<Form ref="form" :model="form" :label-width="80" :rules="ruleValidate"><FormItem label="活動標(biāo)題" prop="title"><Input v-model="form.title" placeholder="請輸入活動標(biāo)題" /></FormItem><FormItem label="活動時間" prop="date_range"><DatePicker v-model="form.date_range" type="daterange" :options="dateOptions" placement="bottom-end" placeholder="請選擇活動時間" style="width: 526px"></DatePicker></FormItem> </Form> data () {return {form: {// 活動標(biāo)題title: null,// 活動時間date_range: null,},// 驗證條件ruleValidate: {title: [{ required: true, message: '活動標(biāo)題不能為空', trigger: 'blur' }],date_range: [{ required: true, type: 'array', message: '活動時間不能為空', trigger: 'change' },{ validator (rule, value, callback, source, options) {const errors = []if (value[0] === '') { errors.push('活動時間不能為空') }callback(errors)} }]}} }

效果：

• 驗證失敗
  
• 驗證成
  
  其實很簡單，最主要的代碼就是自己寫validator (rule, value, callback, source, options)的代碼。

附加：用于單純的時間驗證，代碼如下

pay_at: [{ required: true, type: 'date', message: '請選擇支付時間', trigger: 'blur' }],

總結(jié)

以上是生活随笔為你收集整理的iview form 表单 自定义参数验证 validate的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。