表单验证

说起表单验证,这可是一个经久不衰的话题了,不论是新型的 low code 方案还是老旧的手写方式。

表单验证已经在过去长久的实践里面获得通用的认识,所以大体上,绝大多数的表单验证,在观感上、体验上基本都是一致的。

通常而言,我们常见的都可以发现大致有这么几种表单验证方式:

  • 基于 JSON schema 的
  • 基于 js 配置的
  • 基于 class 的

而我们目前使用的 ant-design-vue(1.7.8) 的表单验证器,至少在现阶段说不上好用,勉强算是灵活有效,适应面广泛。

而 ant-design-vue 的表单验证基本是基于 async-validator 的这带来的比较大的问题就是写起来其实蛮繁琐的。

随手举个官网的例子:

ruleForm: {
    pass: '',
    checkPass: '',
    age: '',
},
rules: {
    pass: [{ validator: validatePass, trigger: 'change' }],
    checkPass: [{ validator: validatePass2, trigger: 'change' }],
    age: [{ validator: checkAge, trigger: 'change' }],
},

最大的特点就是 rules 的声明与 form 分离,且极其不直观。

当然这也是 js 配置方式的一贯特点,很灵活,没有什么太大的劣势。

那么对于我来说,我觉得代码这个东西,主要还是人阅读的,从这个基本点出发,我还是希望稍稍的改善一下阅读体验,但是呢,并不想太过改动原本的验证逻辑。

那么实际上用 class 方式的验证就可以做到。

注意:下文所有代码皆为伪代码,不保证可运行,请自行勘误、编写后使用。

class 方式的表单验证

首先我们需要定义一下 class 方式的表单验证要怎么写。

这里其实不用自己绞尽脑汁的去想了,首先有现成的参考对象 —— spring,其次有现成的实现方案 —— class-validator

当然要把 class-validator 接入 ant-design-vue 是比较复杂和麻烦的。所以我们可以快速的实现一个最小精简子集,借鉴思路即可。

模板

首先定义模板,这块我们就参考 class-validator 的方案就可以了:

@Injectable
class BasicInfoForm {
    @Info({
        name: '用户名',
        trigger: 'change'
    })
    @Required()
    @Max(10)
    @Min(5)
    @UserName()
    userName = '';
    @Int()
    @Currency()
    @Info({
        name: '支付金额',
    })
    payCount = 0;
} 
 

上面这部分代码的意思可以等价的转换为:

const provideKey = Symbo()
const userNameInfo = {
    name: '用户名',
    trigger: 'change'
}
const payCountInfo = {
    name: '支付金额',
    trigger: 'change'
}
const form = {
    ruleForm: {
        userName: '',
        payCount: '',
    },
    rules: {
        userName: [
            Required(userNameInfo), 
            Max(userNameInfo),
            Min(userNameInfo),
            UserName(userNameInfo),
        ],
        payCount: [
            Int(payCountInfo),
            Currency(payCountInfo),
        ],
    },
}
useFormProvide(provideKey, form)

从简洁程度上来说,这个阅读效率总体是高于直接声明的,那么怎么才能比较好的实现这个语法呢?

这里就需要引入 decorators。

decorators

decorators 是处于 tc39 Stage2 阶段的语法提案,当然这一提案已经大变更过一次,由于各个浏览器厂商和使用者都有自己的想法,所以这块可能没这么容易定下来。

并且由于目前还处于实验阶段,无论使用 babel 亦或是 typesript 你都需要单独添加对应的配置,譬如 ts 中你需要主动声明 "experimentalDecorators": true,

具体 decorator 是怎么用的这里就不献丑了,我建议是直接读 阮老师的 es6 decorator 指南,或者英语能力比较好的同学可以去阅读 ts hand book 中 decorators 一章的详细解释,印象中 ts 的实现同 es6 有微小的差异,这里大家可以自行查询校对,本文代码以 ts 的 decorator 规范为标准(typescirpt~4.5.5)。

思路

使用修饰器的情况下我们首先要想一下存储的数据要放哪里,decorator 的生效时机位于 对应目标 的声明时期。所以实际上我们可以变相的理解这一声明的内容是存储在 class 对应 constructor 方法的 prototype 上的,变相的是一个 静态属性。

当然事实上——绝大多数的 class 实现通常会使用一个不那么全局的变量去储存这个数据,我们这里似乎没有这个必要这样做。

那么基于这个思路的原理,上文这个 class 可以等价的翻译为:

const InjectableKey = Symbol('injectable')
const InfoKey = Symbol('infoKey')
const ValidationKey = Symbol('validationKey')
class BasicInfoForm {
    static [InjectableKey] = Symbol()
    static [InfoKey] = {
        userName: {
            name: '用户名',
            trigger: 'change'
        },
        payCount: {
            name: '支付金额',
        }
    }
    static [ValidationKey] = [
        {
            key: 'userName',
            instance: Required()
        },
        {
            key: 'userName',
            instance: Max(10)
        },
        {
            key: 'userName',
            instance: Min(5)
        },
        {
            key: 'userName',
            instance: UserName()
        },
        {
            key: 'payCount',
            instance: Int()
        },
        {
            key: 'payCount',
            instance: Currency()
        }
    ]
    userName = '';
    payCount = 0;
} 

有了上面这个思路以后我们很快就可以写出修饰器的方式:

const infoKey = Symbol('infoKey')
const validationKey = Symbol('validationKey')
export function getReflectValue<T>(target: any, key: symbol, initValue: T) {
  if (!Reflect.has(target, key)) {
    const value = initValue;
    Object.defineProperty(target, key, {
        // 我们不希望他可以被修改,且不能被遍历出来
        enumerable: false,
        configurable: false,
        value,
    });
    return value;
  }
  return target[key];
}
type FormPropertyInfo =  { name: string }
// 怎么设置 info
export function Info(info: FormPropertyInfo) {
  return (target: any, propertyKey: string) => {
    const map = getReflectValue(target, infoMetaKey, {});
    map[propertyKey] = info;
  };
}
 
type ValidationInstance = {...}
// 怎么设置 validation
export function createCustomRule(instance: ValidationInstance) {
  return function (target: any, propertyKey: string) {
    const value = getReflectValue(target, validateMetaKey, []);
    value.push({
      key: propertyKey,
      instance,
    });
  };
}
// inject 同理

编写 rule

下面只需要利用 createCustomRule 编写 rule 即可:

function Max (num: Number) {
    return createCustomRule({
        max: num,
        message: (info) => `${info.name}输入的字符长度不能超过${num}`
    })
}

实现一个 class validator 的 composition

下面实现一个 class validator 的转换 composition 即可:

export type Instanceable<T> = { new (): T };
export const InjectableKey = Symbol('injectable')
export function getInjectableMetaKey<T extends Record<string, any>>(classValidator: Instanceable<T>): symbol | undefined {
  return classValidator.prototype?.[InjectableKey];
}
export function useClassValidatorForm<T extends Record<string, any>>(classValidator: Instanceable<T>) {
  const vm = getCurrentInstanceProxy();
  const instance = new classValidator();
  const formValues = reactive(instance);
  const formRules = computed(() => getClassValidatorRules(vm, instance));
  const formLabels = computed(() => getClassValidatorLabels(vm, instance));
  const injectableMetaKey = getInjectableMetaKey(classValidator);
  const formRef = CreateForm();
  if (injectableMetaKey) {
    provide(injectableMetaKey, {
      formValues: formValues as T,
      formRules,
      formLabels,
      formRef,
    });
  }
  return {
    formValues: formValues as T,
    formRules,
    formLabels,
    formRef,
  };
}

其中 getClassValidatorRulesgetClassValidatorLabels 都十分简单,只是为了取出数据遍历一下,生成结构即可,这里的结构和传输的 instance 也有关系,这里就不多赘述了,按照各自的实际需求去实现:比如添加 i18n 等等。

至于需要 inject 的位置,同样的只需要简单的去处 inject 的 meta key 即可 :

type InjectFormInstance = {...}
const injectableMetaKey = getInjectableMetaKey(classDefine);
const form = inject<InjectFormInstance<T> | null>(injectableMetaKey, null);

这就很简单了可以拿到注册的 form 来绑定 ref ,绑定表单元素了。

本文标题:基于 decorators 的 ant-design-vue 表单验证声明优化思路

永久链接:https://iceprosurface.com/2022/05/19/2022/class-validator/

作者授权:本文由 icepro 原创编译并授权刊载发布。

版权声明:本文使用「署名-非商业性使用-相同方式共享 4.0 国际」创作共享协议,转载或使用请遵守署名协议。

查看源码: