使用說明
npm install vee-validate@2.0.0-rc.25 項目目錄里頭安裝
當(dāng)前頁面上的大部分教程使用中文包的時候會出錯抗蠢，或者報方法不存在举哟，未定義等，是因為版本的問題
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', // 報沖突時 可自定義修改字段名稱
delay: 0, // 錯誤提示的延遲時間
strict: true, // 沒有設(shè)置規(guī)則的表單不進(jìn)行校驗迅矛，
enableAutoClasses: false,
locale: 'zh_CN', // 對語言（中文）的配置
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** 在用戶輸入和表單失去焦點時都進(jìn)行校驗 可單獨寫 blur或input
inject: true
}
Vue.use(VeeValidate, config)
// 自定義validate
const dictionary = {
zh_CN: {
messages: {
email: () => '請輸入正確的郵箱格式',
required: (field) => '請輸入' + field
},
attributes: {
email: '郵箱',
password: '密碼',
task_name: '任務(wù)名稱',
phone: '手機',
task_type: '任務(wù)類型',
task_template: '任務(wù)模板',
task_tine_type: '時間類型',
task_tine_value: '時間類型值',
assisting_department: '協(xié)助單位',
responsible_department: '責(zé)任單位',
target_area: '目標(biāo)新增面積',
target_cahnge_number: '目標(biāo)改造數(shù)量',
implementation_plan: '實施方案',
assessment_standard: '考核指標(biāo)',
grading_standard: '評分標(biāo)準(zhǔn)',
score: '考核分值'
}
}
}
Validator.updateDictionary(dictionary)
Validator.extend('phone', {
messages: {
zh_CN: field => field + '必須是11位手機號碼'
},
validate: value => {
return value.length === 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
}
})
使用案例
前端頁面代碼
<el-col :span="22">
<el-form-item label="任務(wù)名稱">
<el-input
name="task_name" // 驗證字段名妨猩，對應(yīng)validate.js里dictionary中的字段名稱
v-model="form.task.name"
v-validate="'required|min:3'" // 規(guī)則定義
placeholder="請輸入任務(wù)名稱"></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)一驗證
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)
檢驗所有的包含里頭的字段，當(dāng)所有字段都驗證通過時 返回true
