npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

criteriajs

v1.0.5-rc.1

Published

Apply rulesets for your password fields

Downloads

4

Readme

criteriaJS

Apply pre-defined rules to your password fields.

Install Using Package Managers

# Bower
bower install --save criteriajs

# NPM
npm install criteriajs

Import Library

import 'criteriajs';

Register Global Rules

Rules are pretty self-explanatory. Length rule has a type of range (min-max) while the rest only checks for single value (min)

const criteria = $('input[data-criteria]').criteria({
  rules: {
    length: [6, 15],
    contains: {
      alphanumerical: 1,
      numerical: 1,
      lowercase: 1,
      uppercase: 1,
      special: 1,
    },
  },
  initialize: ($element) => {},
  change: ($element, attributes) => {
    Object.values(attributes.rules).every(rule => rule === true);
  },
  focus: ($element, attributes) => {},
  blur: ($element) => {},
});

Using Data Attribute

If you wish to register criteria per element instead of globally, just omit the rules object, add data-criteria attribute to your inputs and seperate each rule with a pipe (|).

Example:

<input type="password" data-criteria="length:6-15|alphanumerical:1|mumerical:1|uppercase:2|lowercase:3">
<input type="password" data-criteria="length:4-20|mumerical:3|uppercase:1|special:3">
const criteria = $('input[data-criteria]').criteria({
  initialize: ($element) => {},
  change: ($element, attributes) => {
    // console.log($element, attributes);
  },
  focus: ($element, attributes) => {},
  blur: ($element) => {},
});

When to Enable / Disable Form Submit

You should disable the form from being submitted by adding disabled attribute to the button beforehand, and remove the attribute when all criteria are matched. A simple check can be used to determine whether all of the rules you wish to validate are satisfied or not.

Object.values(attributes.rules).every(rule => rule === true);

Setting up development environment

You can go ahead and play around with src/example/index.html after running the commands below.

# 1. fetch project
git clone [email protected]:cfkarakulak/CriteriaJS.git

# 2. change directory to criteriajs and install dependencies
npm install

# 3. compile and listen for changes
npm run watch

Settings

Rule | Type | Default | Description ------ | ---- | ------- | ----------- length | array | [6, null] | Checks whether the value of the target element has a length between min and max. Use [6, null] if you wish to disable maximum check. alphanumerical | integer | null | Checks whether the value has at least n number of alphanumerical characters. Latin Alphabet numerical | integer | null | Checks whether the value has at least n number of numerical characters. [0-9] lowercase | integer | null | Checks whether the value has at least n number of lowercase characters. [a-z] uppercase | integer | null | Checks whether the value has at least n number of uppercase characters. [A-Z] special | integer | null | Checks whether the value has at least n number of special characters. [!,@,#,%,$,%]