验证器Mixin

使用 ValidatorMixin 以实施自定义输入/格式验证符。 执行此组合的元素实例将被注册用于执行的元素 ValidatableMixin。 。 。 .

安装

npm i @anypoint-web-components/validator-mixin --save

使用量

校验器名称

默认情况下,它需要当前 HTML 元素的下大小写名 。 如果这门课 用于自定义元素环境外,然后使用静态 is 属性 以获得混合剂的名称.

static get is() {
 return 'my-validator';
}

抖动验证符

当创建验证器实例时, 它被存储在全局验证器缓存中 由 ValidatorStore 模块.

在全域商店中注册验证符后,它不会被绑定在组件的生命周期方法上(它可以扩展一个对象而不是HTMLElement). 另外,验证器通常会在文档中停留在网络应用的整个生命周期. 但是,如果你需要取消注册 验证员,然后打电话 instance.unregister() 函数 然后从 DOM 中分离出此元素,或者去掉对对象的引用,以便它能被GC'd.

你也可以打电话来 ValidatorStore.unregister(instance)。 。 。 .

在一个LitElement中

import { LitElement } from 'lit-element';
import { ValidatorMixin } from '@anypoint-web-components/validator-mixin';

class CatsOnly extends ValidatorMixin(LitElement) {
  validateObject(obj) {
    return !Object.keys(obj).some((key) => obj[key].match(/^(c|ca|cat|cats)?$/) === null);
  }

  validateArray(value) {
    return !value.some((value) => value.match(/^(c|ca|cat|cats)?$/) === null);
  }

  validate(values) {
    if (Array.isArray(values)) {
      return this.validateArray(values);
    }
    if (typeof values === 'object') {
      return this.validateObject(values);
    }
    return values.match(/^(c|ca|cat|cats)?$/) !== null;
  }
}
window.customElements.define('cats-only', CatsOnly);

发展

git clone https://github.com/anypoint-web-components/validator-mixin
cd validator-mixin
npm install

测试

npm test

演示

npm start