1. ottervalidation
Simple, lightweight validation with full typescript support
ottervalidation
Package: ottervalidation
Created by: effectpet
Last modified: Thu, 12 May 2022 09:23:19 GMT
Version: 1.0.5
License: MIT
Downloads: 4
Repository: https://github.com/effectpet/ottervalidation

Install

npm install ottervalidation
yarn add ottervalidation

OtterValidation

Simple, lightweight validation with full typescript support

Installation

 npm install ottervalidation

Full example

 import { OV, OVValidation } from 'ottervalidation';

interface Form {
  username: string,
  password: string,
  mailAddress: string,
}

const form: Form = {
  username: 'Some username',
  password: 'SomeP4ssword!',
  mailAddress: '[email protected]',
};

const validation: OVValidation<Form> = {
  username: {
    required: true,
    type: 'string',
    minLength: 4,
    maxLength: 32,
  },
  password: {
    required: true,
    type: 'string',
    minLength: 8,
    maxLength: 128,
    minUpperCase: 1,
    minLowerCase: 1,
    minNumeric: 1,
    minSymbol: 1,
  },
  mailAddress: {
    required: true,
    type: 'string',
    email: true,
  },
};

const ov = new OV(form, validation);
const ovResult = ov.validate();
/*
  ovResult: {
    object: {
      username: {},
      password: {},
      mailAddress: {},
    }
  }
*/

Example with errors

 import { OV, OVValidation } from 'ottervalidation';

interface Form {
  username: string,
  password: string,
  mailAddress: string,
}

const form = {
  password: 'invalid length',
  mailAddress: 'invalid email',
} as Form;

const validation: OVValidation<Form> = {
  username: {
    required: true,
  },
  password: {
    minLength: 32,
  },
  mailAddress: {
    email: true,
  },
};

const ov = new OV(form, validation);
const ovResult = ov.validate();
/*
  ovResult: {
    errors: ['username.required', 'password.minlength', 'mailAddress.email'],
    object: {
      username: { errors: ['username.required'] },
      password: { errors: ['password.minlength'] },
      mailAddress: { errors: ['mailAddress.email'] },
    }
  }
*/

Validation types

Key Argument Description Works with
required boolean checks whether the key exists in the object string, number, boolean
type string string[] Checks whether the value is of the given type
minLength number Checks whether the value has the minimum length string
maxLength number Checks whether the value has the maximum length string
exactLength number Checks whether the value has the exact length string
email boolean Checks whether the value is an e-mail address string
minUpperCase number Checks whether the value has the minimum number of uppercase letters string
minLowerCase number Checks whether the value has the minimum number of lowercase letters string
minNumeric number Checks whether the value has the minimum number of numerics string
minSymbol number Checks whether the value has the minimum number of symbol characters string
regex RegExp Checks whether the value matches against the regex string

Configuration Example

 ...

const config: OVConfiguration = {
  errorMessage: {
    prefix: 'validation',
    addKeyPrefix: true,
    override: {
      'validation.username.required': 'Username is required',
    }
  }
}

const ov = new OV(form, validation, config);
const ovResult = ov.validate();
/*
  ovResult: {
    errors: ['Username is required'],
    object: {
      username: { errors: ['Username is required'] },
    }
  }
*/

Configuration

Key Argument Description
errorMessage.prefix string Adds a prefix to the error message
errorMessage.addKeyPrefix boolean Add the key prefix to error message (default true)
errorMessage.override Record<string, string> Overrides the error message

Contributing

 # install dependencies
npm install

# run all tests
npm test

# run linter
npm run lint

License

MIT

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin