【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;
}
}
}
});
複製程式碼