验证混合剂

一个混入,用于在LitElement组件中执行用户输入验证.

此验证表支持多个验证符 .

使用 ValidatableMixin 用于执行验证用户输入的元素。 使用相关的 ArcValidatorBehavior 将自定义验证逻辑添加到任何点输入或其他围绕本地输入的包装上.

要执行元素的自定义验证逻辑, 您必须覆盖受保护的 _getValidity() 这种混合方法,而不是 validate()。 。 。 .

无障碍

改变 invalid 属性,通过手动或呼叫 validate() 将更新 aria-invalid 属性.

使用量

安装

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

使用 _getValidity() 函数

import { LitElement, html } from 'lit-element';
import { ValidatableMixin } from '@anypoint-web-components/validatable-mixin';

class InputValidatable extends ValidatableMixin(LitElement) {
  render() {
    return html`<input @input="${this._onInput}"/>`;
  }

  _onInput(e) {
    this.validate(e.target.value);
  }

  _getValidity(value) {
    return value.length >= 6;
  }
}
window.customElements.define('input-validatable', InputValidatable);

使用自定义验证符

<cats-only message="Only cats are allowed!"></cats-only>
<input-validatable validator="cats-only"></input-validatable>

<script>
import { LitElement } from 'lit-element';
import { ValidatorMixin } from '@anypoint-web-components/validator-mixin';
import { ValidatableMixin } from '@anypoint-web-components/validatable-mixin';

class CatsOnly extends ValidatorMixin(LitElement) {
  validate(value) {
    return value.match(/^(c|ca|cat|cats)?$/) !== null;
  }
}
window.customElements.define('cats-only', CatsOnly);

class InputValidatable extends ValidatableMixin(LitElement) {
  render() {
    return html`<input @input="${this._onInput}"/>`;
  }

  _onInput(e) {
    this.validate(e.target.value);
  }
}
window.customElements.define('input-validatable', InputValidatable);
</script>

发展

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

本地运行演示

npm start

运行测试

npm test