VUE中使用TypeScript装饰器实现表单验证的全过程

// 比如我们有一个创建用户的表单，在上面已经应用了一个Reactive类装饰器
// 用了这个装饰器后，这个类实例出来的对象会是响应式对象了。
@Reactive()
export class CreateUserForm {
  username:string
  email:string
  password:string
  confirmPassword:string
}

setup() {
  // 如果没有用装饰器，则需要 const form = reactive(new CreateUserForm())
  const form = new CreateUserForm()
  return {
    form
  }
}

import {reactive} from 'vue-demi'
// vue-demi可以让你的库同时在vue2(@vue/composition-api)和vue3中使用
//下面这个函数Reactive就是类装饰器，返回的是继承之后的类。实例化之后返回的是reactive对象
function Reactive() {
  return function <T extends { new (...args: any[]): {} }>(constructor: T){
    return class extends constructor { 
      constructor(...args: any[]) {
        super(...args) 
        return reactive(this)
      }
    }
  }
}

import { IsEmail, IsMobilePhone, Length } from 'class-validator'
@Reactive()
export class CreateUserForm {
    // 下面这些是属性装饰器，用来标记这些属性的验条件。
    // 在验证的时候会通过Reflect拿到这些元数据来验证
    // 我们也可以创建自定义的装饰器
    @Length(4, 12)
    username: string
    
    @IsEmail()
    email: string

    @IsMobilePhone('zh-CN')
    phone: string

    @Length(4, 12)
    password: string
}

import { validate } from 'class-validator'
setup() {
  const form = new CreateUserForm()
  const errors = reactive< { [x in keyof CreateUserForm]: string} >({})
  const validate = async () => {
    const err = await validate(form)
    err.forEach(e => {
      if (e.constraints) {
        errors[e.property] = Object.values(e.constraints)[0]
      }
    })
  }
  return {
    form,
    errors
  }
}

// 用的是jsx，看个人习惯
render(){
  const {form,errors} = this
  return <div>
            <div>
                <p>
                    <span>用户名</span>
                    <input v-model={form.username}></input>
		</p>
                {!!errors.username && <p>错误提示:{errors.username}</p>}
            </div>
            // ...一些其他表单
            <button onClick={() => this.validate()}>验证</button>
        </div>
}

import { instanceToPlain } from 'class-transformer'
import { validate, ValidationError } from 'class-validator'
import { toRef, watch } from 'vue-demi'
const ERROR = Symbol('error') 
const IS_VALID = Symbol('isValid')
// 本来我打算error的类型简单的写成Record<string,any>
// 但是代码提示太不友好了，写成这样的话，可以完美的提示
// 这个接口写起来很麻烦
type ValidatorError < T > = { 
    [x in Exclude < keyof T, keyof Validator >] ?:
    T[x] extends PropertyKey ? string: ValidatorRequiredError < T[x] >
}
type ValidatorRequiredError < T > = { 
    [x in Exclude < keyof T, keyof Validator > ] : 
        T[x] extends PropertyKey ? 
        string | undefined:
        T[x] extends Function ? 
        T[x] :
        ValidatorError < T[x] > |undefined
}
type ValidatorJSON < T > = { 
    [x in Exclude < keyof T, keyof Validator > ] : 
    keyof T extends PropertyKey ? T[x] : ValidatorJSON < T[x] >
}

export default abstract class Validator {
    // 这里属性用symbol是为了防止跟表单属性重复
    private [ERROR]: ValidatorError <this> ={}
    private [IS_VALID] : boolean = false

    public getError() {
      return this[ERROR]
    }
    public isValid() {
      return this[IS_VALID]
    }
    public toJSON() {
      return instanceToPlain(this) as ValidatorJSON < this >
    }
    public async validate() {
        // 一些验证的代码
    }
    public clearError() {
      this[ERROR] = {}
    }
    private setError(result: ValidationError[]):Record <string,any > {
       // 将error设置到this[ERROR]上
    }
    private watchFields(parentKeys ? :string[]) {
       // 这里做了单独watch每个属性，然后单独设置错误消息
    }
}
    -----------------------------------------    
//上面watchFields这个方法需要实例化的时候单独调用
//所以我们可以放到Reactive装饰器上，就不需要再手动调用一次了
function Reactive() {
  return function <T extends { new (...args: any[]): {} }>(constructor: T){
    return class extends constructor { 
      constructor(...args: any[]) {
        super(...args) 
        const target = reactive(this)
        if (target.watchFields) {
            target.watchFields()
        }
        return target
      }
    }
  }
}

// ./form.ts
import { Type } from 'class-transformer'
import { IsEmail, IsMobilePhone, IsOptional, Length,
	MaxLength, MinLength,  ValidateNested } from 'class-validator'
import 'reflect-metadata'
// 需要引入 reflect-metadata 来使用metadata

class Profile {
    @IsOptional()
    avatar?: string

    @Length(2, 4, {message: '姓名长度应在2到4间'})
    realName: string

    @IsOptional()
    description?: string
}

// 在表单上可以设置初始值，现在是固定的。
// 那也可以通过属性装饰器调用api来设置动态初始值。大家可以自己实现试试看 
@Reactive()
export class CreateUserForm extends Validator {
    @Length(4, 12, { message: '用户名长度应在4到12间' })
    username: string = ''

    @IsEmail({}, { message: '请填写正确的邮箱' })
    email: string = ''

    @IsMobilePhone('zh-CN', null, { message: '请输入正确的手机号码' })
    phone: string = ''

    @MinLength(4, { message: '密码长度不应低于4' })
    @MaxLength(12, { message: '密码长度不应大于12' })
    password: string = ''

    // 也可以关联其他表单类，但需要下面两个装饰器，用来关联
    @Type(() => Profile)
    @ValidateNested()
    profile: Profile = new Profile()
}

export default defineComponent({
setup() {
    const form = new CreateUserForm()
    return {
        form
    }
},
render() {
    const { form } = this
    return (
        <div>
            <field label='用户名' v-model={form.username} error={form.getError().username}></field>
            <field label='姓名' v-model={form.profile.realName} error={form.getError().profile?.realName}></field>
            <field label='邮箱' v-model={form.email} error={form.getError().email}></field>
            <field label='手机' v-model={form.phone} error={form.getError().phone}></field>
            <field label='密码' v-model={form.password} error={form.getError().password}></field>
            <button onClick={() => form.validate()}>验证</button>
            <button onClick={() => form.clearError()}>清空错误</button>
        </div>
    )
}
})