使用說(shuō)明

npm install vee-validate@2.0.0-rc.25 項(xiàng)目目錄里頭安裝

當(dāng)前頁(yè)面上的大部分教程使用中文包的時(shí)候會(huì)出錯(cuò)，或者報(bào)方法不存在，未定義等，是因?yàn)榘姹镜膯?wèn)題

validate.js 范本

import Vue from 'vue'
import VeeValidate, { Validator } from 'vee-validate'
import zh from 'vee-validate/dist/locale/zh_CN'// 引入中文文件
// 配置中文
Validator.addLocale(zh)
const config = {
  errorBagName: 'errors', // change if property conflicts.
  fieldsBagName: 'fieldBags',  // 報(bào)沖突時(shí) 可自定義修改字段名稱(chēng)
  delay: 0, // 錯(cuò)誤提示的延遲時(shí)間
  strict: true, // 沒(méi)有設(shè)置規(guī)則的表單不進(jìn)行校驗(yàn)，
  enableAutoClasses: false,
  locale: 'zh_CN', // 對(duì)語(yǔ)言（中文）的配置
  classNames: {
    touched: 'touched', // the control has been blurred
    untouched: 'untouched', // the control hasn't been blurred
    valid: 'valid', // model is valid
    invalid: 'invalid', // model is invalid
    pristine: 'pristine', // control has not been interacted with
    dirty: 'dirty' // control has been interacted with
  },
  events: 'input', //* *input|blur** 在用戶(hù)輸入和表單失去焦點(diǎn)時(shí)都進(jìn)行校驗(yàn) 可單獨(dú)寫(xiě)  blur或input
  inject: true
}
Vue.use(VeeValidate, config)

// 自定義validate
const dictionary = {
  zh_CN: {
    messages: {
      email: () => '請(qǐng)輸入正確的郵箱格式',
      required: (field) => '請(qǐng)輸入' + field
    },
    attributes: {
      email: '郵箱',
      password: '密碼',
      task_name: '任務(wù)名稱(chēng)',
      phone: '手機(jī)',
      task_type: '任務(wù)類(lèi)型',
      task_template: '任務(wù)模板',
      task_tine_type: '時(shí)間類(lèi)型',
      task_tine_value: '時(shí)間類(lèi)型值',
      assisting_department: '協(xié)助單位',
      responsible_department: '責(zé)任單位',
      target_area: '目標(biāo)新增面積',
      target_cahnge_number: '目標(biāo)改造數(shù)量',
      implementation_plan: '實(shí)施方案',
      assessment_standard: '考核指標(biāo)',
      grading_standard: '評(píng)分標(biāo)準(zhǔn)',
      score: '考核分值'
    }
  }
}

Validator.updateDictionary(dictionary)

Validator.extend('phone', {
  messages: {
    zh_CN: field => field + '必須是11位手機(jī)號(hào)碼'
  },
  validate: value => {
    return value.length === 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
  }
})

使用案例

前端頁(yè)面代碼

<el-col :span="22">
    <el-form-item label="任務(wù)名稱(chēng)">
        <el-input
                name="task_name" // 驗(yàn)證字段名，對(duì)應(yīng)validate.js里dictionary中的字段名稱(chēng)
                v-model="form.task.name"
                v-validate="'required|min:3'" // 規(guī)則定義
                placeholder="請(qǐng)輸入任務(wù)名稱(chēng)"></el-input>
        <span
            :class="{'input': true, 'is-danger': errors.has('task_name') }"
            v-show="errors.has('task_name')">{{ errors.first('task_name') }}</span>
    </el-form-item>
</el-col>

表單提交進(jìn)行統(tǒng)一驗(yàn)證

async validateForm () {
  let AdditionalColumnList = this.AdditionalColumnList
  let arr = {
    task_name: this.form.task.name,
    task_type: this.form.task.type,
    task_template: this.form.template_id,
    task_tine_type: this.form.fields.time.type,
    task_tine_value: this.form.fields.time.value,
    assisting_department: this.form.fields.assisting_department,
    responsible_department: this.form.fields.responsible_department,
    target_area: this.form.fields.target_area,
    target_cahnge_number: this.form.fields.target_cahnge_number,
    implementation_plan: this.form.fields.implementation_plan,
    assessment_standard: this.form.assessment_standard,
    grading_standard: this.form.grading_standard,
    score: this.form.score
  }
  let that = this
  AdditionalColumnList.forEach(function (item) {
    arr[item.name] = that.form.fields.additional_fields[item.code]
  })
  let res = await this.$validator.validateAll(arr)
  return res
},

備注

this.validator.validateAll(arr) 檢驗(yàn)所有的包含里頭的字段，當(dāng)所有字段都驗(yàn)證通過(guò)時(shí) 返回true