SMValidator(strong muscle validator)

Features

• Less than 10KB

• No dependencies

• Customizable rules messages and styles

• Support bootstrap and semantic

• Useable RegExp on html

• Support IE8+

Tutor And Documents

• 中文版教程

• 快速开始

Preview

• Required (required rule in html)

<input type="text" data-rule="required">

• RegExp (using RegExp in html)

<input type="text" data-rule="/^[a-z]+$/i/Please input letters">

• Your Style (add .fail-error on input when validate failed)

<input type="text" data-rule="failCss(fail-error)">

• Javascript (use only js without data-rule)

new SMValidator('form', {
  rules: {
    //define a rule by RegExp
    onlyNumber: [/^-?\d+(\.{1}\d+)?$/, 'Please input letters'],
    //define a rule by Function
    greater: function(val, num) {
      return (val*1 > num*1) || 'Please input a number that greater than ' + num;
    }
  },
  fields: {
    //fieldName1 match input's name
    fieldName1: {
      required: true,
      rule: 'onlyNumber|greater(10)',
      failCss: 'fail-error'
    }
  }
});

Demos

• A complex demo

• Support third-party UI framework

Install

• npm install --save SMValidator

• bower install SMValidator

Notice

• checkbox invalid in IE8

• <select> only validate on blur in IE9~11, because it's not support oninput

About dist

• SMValidator.js source with config

• SMValidator.min.js the minify for SMValidator.js

• SMValidator.pure.min.js without config, set rule and style by yourself

TODO

1. 英文教程

2. 添加vue插件版本

Reference

some inspirations comes from: nice-validator