感謝：尤大大的 vue、有讚的 vant、async-validator、以及 asseekjavascript
連接：https://www.jianshu.com/p/d58fe749b97fvue
在下不才在 asseek 的基礎上加入了一些本身的想法有了如今的版本。
拋磚引玉請多多提點。java
修正內容：數組
-
Promise 代替 callbackasync
-
添加 Proxy 實現校驗的自動觸發ui
-
精簡部分代碼以期下降閱讀難度this
目的：url
自動校驗、手動校驗、校驗錯誤信息展現.net
/*
* @Author: 吳佔超
* @Date: 2018-11-20 15:16:16
* @Last Modified by: 吳佔超
* @Last Modified time: 2018-11-21 21:43:11
* 校驗擴展
* this.validator = new ValidatorUtils({
rules: this.rules,
data: this.formData })
this.formData = this.validator.Data
*/
import AsyncValidator from 'async-validator'
import _ from 'lodash'
export default class ValidatorUtils {
/**
* Creates an instance of ValidatorUtils.
* @param {Object} rules
* @param {Object} data
* @param {Object} errMsg 錯誤信息文本key 同data
* @param {Boolean} automatic 自動校驗
*
* @memberOf ValidatorUtils
*/
constructor({ rules, data, errMsg = {}, automatic = true }) {
this.setRules(rules)
this.data = data
this.errMsg = errMsg
automatic && this.setProxyValidate()
}
// #region 屬性
get Rules() {
return this.rules
}
set Data(value) {
this.data = value
}
get Data() {
return this.data
}
get Validators() {
return this.validators
}
set Validators(value) {
this.validators = value
}
set ErrMsg(value) {
this.errMsg = this.value
}
get ErrMsg() {
return this.errMsg
}
// #endregion
/**
* 自動校驗代理設置
*
* @returns
*
* @memberOf ValidatorUtils
*/
setProxyValidate() {
let that = this
let p = {
set(target, key, value, receiver) {
target[key] = value
that
.validate(key)
.then(result => {})
.catch(() => {})
return true
}
}
this.data = new Proxy(this.data, p)
}
/**
* 設定規則
* @param rules rules object async-validator rules
* @param cover 是否替換舊規則
*/
setRules(rules, cover = true) {
!cover || (this.Validators = {})
_(rules)
.mapKeys(
(value, key) =>
(this.Validators[key] = new AsyncValidator({ [key]: value }))
)
.value()
}
/**
* 執行驗證
*
* @param {String,Array} tempData 可選 傳空將驗證構造data 支持key，list<key>
* @returns Promise
*
* @memberOf ValidatorUtils
*/
validate(tempData) {
// 錯誤數組
const err = []
let that = this
_(this.Validators)
.keys()
.filter(
p =>
!tempData ||
(tempData &&
_(that.Data).hasIn(tempData) &&
((_.isString(tempData) && tempData === p) ||
(_.isArray(tempData) && _(tempData).hasIn(p))))
)
.value()
.forEach(p =>
this.Validators[p].validate({ [p]: this.Data[p] }, error => {
error && err.push(error[0])
this.setErrMsg(p, error)
})
)
if (err.length > 0) return Promise.reject(err)
else return Promise.resolve(tempData)
}
/**
*
* 設置error消息
* @param {any} error
*
* @memberOf ValidatorUtils
*/
setErrMsg(key, error) {
this.errMsg[key] = error ? error[0].message : undefined
}
}
規則聲明：代理
<van-field :error-message="validator.ErrMsg.telNumber" v-model="formData.telNumber"
required clearable label="手機號"
icon="question" placeholder="請填寫正確有效的手機號"
@click-icon="$toast('請填寫正確有效的手機號')" />
data:()=>({ // 驗證對象 validator: undefined, // 表單數據源 formData: { // 車牌號 carNumber: '魯B', // 手機號 telNumber: undefined }, // 校驗 rules: { carNumber: [ { required: true, message: '請輸入魯B/魯U開頭完整車牌號' }, { validator: (rule, value, callBack) => { /^[魯]{1}[B|U]{1}[A-Z0-9]{5,6}$/.test(value) ? callBack() : callBack('請輸入魯B/魯U開頭完整車牌號') } } ], telNumber: [ { validator: (rule, value, callBack) => { if (!value) { callBack('請輸入手機號碼') } else if (/^[1][0-9]{10}$/.test(value)) { callBack() } else { callBack('請輸入正確的手機號碼') } } } ] }, ......}), created() { this.validator = new ValidatorUtils({ rules: this.rules, data: this.formData }) this.formData = this.validator.Data },