【vue外掛篇】vue-form-check 表單驗證
摘要:
// 引用(eg. 在工程的main.js下)
import vueFormCheck from 'vue-form-check'
Vue.use(vueFormCheck)
複製程式碼
呼叫
this.$checkForm(current, config)
@para...
// 引用(eg. 在工程的main.js下) import vueFormCheck from 'vue-form-check' Vue.use(vueFormCheck) 複製程式碼
呼叫
this.$checkForm(current, config) @params current 是當前校驗物件 config是校驗規則物件 config.alias別名 config.type配置項資料型別 config.required是否必填 config.rule正則校驗 config.depend先決條件(省事可以在callback裡直接判斷,推薦寫,true校驗本項;false不校驗本項) config.callback靈活校驗(rule同時出現,只處理callback,引數是當前值,true校驗通過;false校驗不通過) @return object 物件 不通過的話{alias: '電話', type: 'rule'}alias是配置的別名,type可以是['type'|'required'|'rule'] 校驗通過的話{} 空物件 ps. 驗證表單可以寫在mixin裡,這裡簡單處理直接寫在元件裡了 複製程式碼
Component
// 使用例子 new Vue({ data() { return { params: { id: '1234', person: { name: 'jackie', age: '27', phone: '18266666666', home: ['羅湖區田心村'] } } } }, methods: { submit() { //... console.log('submit success'); }, check() { let obj = this.$checkForm(this.params, { id: { alias: 'id', type: 'string' }, // 必填校驗 'person.name': { alias: '學校', type: 'string', required: true }, // 正則校驗 'person.phone': { alias: '電話', type: 'string', rule: /^1[345678][0-9]{9}$/ }, // 靈活校驗,如數值、日期區間驗證 'person.age': { alias: '年齡', callback(value) { if (value < 30 && value > 18) { return true; } return false; } }, // 先決校驗,如果電話等於以下,校驗地址資訊 'person.home': { alias: '方向', type: 'array', required: true, depend() { if (this.params.person.phone === '18210517463') { return true; } return false; } } }); const length = Object.keys(obj).length; if (length === 0) { return this.submit(); } switch (obj.type) { case 'type': this.$alert(`${obj.alias}的型別定義錯誤`, '提示'); break; case 'required': this.$alert(`${obj.alias}是必填項`, '提示'); break; case 'rule': this.$alert(`${obj.alias}的輸入不符合規範`, '提示'); break; default: break; } } } }); 複製程式碼