自定义校验封装
<ReserveFrom
ref="ReserveFromRef"
@change="toChangeInput"
:reserveData="reserveData"
/>
//---------------
ReserveFrom.vue
<template>
//----------------validate.ts
/**
- 表单校验
- 非空、自定义校验、正则校验
*/
interface ListType {
[key: string]: any // string | boolean | RegExp | Function,
}
export interface RulesType {
[key: string]: ListType[]
}
/**
- From
{
linkMan: "请输入游客姓名"
linkPhone: "请输入手机号码"
}
*/
interface From {
[key: string]: string
}
export default (rules = {} as RulesType, data: any) => {
return new Promise((resolve, reject) => {
const from = {} as From
function validateFn (params: any) {
for (const key in rules) {
if (Object.hasOwnProperty.call(rules, key)) {
const rule = rules[key] || []
const value = params[key]
console.log('value ---- ', params)
for (let index = 0; index < rule.length; index++) {
const element = rule[index]
// 非空校验
if (element.required) {
// debugger
if (!value) {
from[key] = element.message
break
}
}
// 自定义校验
if (element.validate) {
let flag = true
element.validate(rule, value, data, (res: Error) => {
if (res) {
from[key] = res.message
flag = false
} else {
flag = true
}
})
if (!flag) break
}
// 正则校验
if (element.reg) {
if (!element.reg.test(value)) {
from[key] = element.message
break
}
}
}
}
}
}
if (data instanceof Array) {
data.forEach(item => {
validateFn(item)
})
} else {
validateFn(data)
}
if (Object.keys(from).length > 0) {
reject(from)
} else {
resolve(true)
}
})
}