自定义校验封装

<ReserveFrom
  ref="ReserveFromRef"
  @change="toChangeInput"
  :reserveData="reserveData"
  />
  //---------------
  ReserveFrom.vue
  <template>

预订人信息 姓名 {{ errFrom.name }} 手机号码 {{ errFrom.phone }} 订单留言

//----------------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)
  }
  })
  }