Validator

Version: 1.0.0

Release Date: 2020-01-20

Most form UI packages have their own validator to use for convenience. But sometimes we don't use only one UI packages to develop every single project. So we try to create the validator generally to adapt to every kind of form UI packages to allow us using just one type of validator coding patteren to develop with every UI packages.

INSTALLATION

$ npm install --save @blacktoolbox/prototype-validator

// using ES6 modules
import Validator from '@blacktoolbox/prototype-validator';

// using CommonJS modules
var Validator = require('@blacktoolbox/prototype-validator');

// using in HTML directly
<script type="text/javascript" src="./libs/prototype-validator/index.min.js"></script>
Class globalThis['btblab-validator'].default;

APPLICATION

Event Rules

The validator is designed as a validator for 'event' which means it is not design for 'form'. So it do not bind with form and only triggered by event or function. For this, we need defined the event rule map as follow for example as following.

const rules = {
  'accChange' : [
    {
      rule    : 'strLength|min:2',
      message : 'Username length required 2 at least.'
    }
  ],
  'pwdChange' : [
    {
      rule    : 'strAbsLength|absolute:6',
      message : 'Password length must be 6.'
    }
  ],
  'valueTest' : [
    {
      rule    : 'numAbsValue|absolute:6',
      message : 'Password length must be 6.'
    }
  ],
  'typeCheck' : [
    {
      rule    : 'type|type:number',
      message : 'Type error.'
    }
  ],
  'ipCheck' : [
    {
      rule    : 'format|type:ivp4',
      message : 'Type error.'
    }
  ],
  'portChange' : [
    {
      rule    : 'numRange|min:1;max:65535',
      message : 'Port limited between 1-65535'
    },
    {
      rule    : function(value){
        return (value !== 777)
      },
      message : 'Port 777 is forbidden.'
    }
  ]
};

Every key name under rule are named with the concept of event, and they are also Array type which means we can have a list to make sure the values are actually we need. Every check rule can have their message. Cause the rule are defined in event angle. So we can execute when we need or different value validated with same rule depending on the user's design.

- rule:

Rule config included type and parameters.

- message:

Message for while fail.

Rule Type

Now we support some rule.

- type|type:[string]

Check input's typeof.

- length|min:[number];max:[number]

Check the string's length between min and max. Otherwise, we can check min or max only like 'length|min:4'.

- absLength|absLength:[number]

Check the string's absolute length like string.length === absLength.

- range|min:[number];max:[number]

Check the number's range between min and max. Otherwise, we can check min or max only like 'range|min:4'.

- absValue|absValue:[number]

Check the number's absolute value like number === absValue.

- format|type:[string]

Supported: email, numeric, literal, ivp4, mac

Methods

Firstly we have to implement it, when we want to use the validator.

// using as module
const validator = new Validator();

// using in HTML directly
const validator = new globalThis['btblab-validator'].default();

And after defined the event-rule-map, we have some methods for using.

- init(rules);

// To put our event-rule-map into the Validator to init it meanwhile create the status for each event rule.

- status(event);

// Status() means get all status, and status(event) means to get the status of event we want.

- reset();

// Reset the status of events.

- validate(event, value);

// Validate the value while event triggered.

Status

The structure of status for each event.

const structureStatus = function() {
  this.message = '';
  this.status = null;
};

Every event could be the three type of status: null, false, true. And null means the status is initialized.