@fengyuanchen/validator v0.1.0

Validator

A simple jQuery form validation plugin.

• Demo

Table of contents

• Features
• Main
• Getting started
• Rules
• Messages
• Validators
• Options
• Methods
• Events
• No conflict
• Browser support
• Versioning
• License

Features

• Supports common rules
• Supports custom rules
• Supports custom messages
• Supports custom validators

Main

dist/
├── validator.js      (13 KB)
└── validator.min.js  ( 7 KB)

Getting started

Quick start

Three quick start options are available:

• Download the latest release.
• Clone the repository: git clone https://github.com/fengyuanchen/validator.git.
• Install with NPM: npm install @fengyuanchen/validator.

Installation

Include files:

<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<script src="/path/to/validator.js"></script>

Usage

Initialize with $.fn.validator method.

<input type="text" required>

$('input').validator({
  rules: {
    maxlength: 3
  }
});

$('input').validator('isValid'); // false (required)
$('input').val('abc').validator('isValid'); // true
$('input').val('abcde').validator('isValid'); // false (too long)

⬆ back to top

Rules

number

• Type: Boolean

The enter value must be a valid number (only digits).

<input type="number">

Or

$('input').validator({
  rules: {
    number: true
  }
});

email

• Type: Boolean

The enter value must be a valid email.

<input type="email">

Or

$('input').validator({
  rules: {
    email: true
  }
});

url

• Type: Boolean

The enter value must be a valid URL.

<input type="url">

Or

$('input').validator({
  rules: {
    url: true
  }
});

date

• Type: Boolean

The enter value must be a valid date.

<input type="date">

Or

$('input').validator({
  rules: {
    date: true
  }
});

required

• Type: Boolean

The enter value must be not empty.

<input type="text" required>

Or

$('input').validator({
  rules: {
    required: true
  }
});

min

• Type: Number

The enter number must greater than or equal to this.

Usage:

<input type="number" min="1">

Or

$('input').validator({
  rules: {
    number: true,
    min: 1
  }
});

max

• Type: Number

The enter number must less than or equal to this.

Usage:

<input type="number" max="100">

Or

$('input').validator({
  rules: {
    number: true,
    max: 100
  }
});

range

• Type: Array

The enter number must between this0 and this1.

Usage:

<input type="number" range="1,100">

Or

$('input').validator({
  rules: {
    number: true,
    range: [1, 100]
  }
});

minlength

• Type: Number

The enter characters' length must greater than or equal to this.

Usage:

<input type="text" minlength="1">

Or

$('input').validator({
  rules: {
    minlength: 1
  }
});

maxlength

• Type: Number

The enter characters' length must less than or equal to this value.

Usage:

<input type="text" maxlength="100">

Or

$('input').validator({
  rules: {
    maxlength: 100
  }
});

rangelength

• Type: Array

The enter characters' length must between this0 and this1.

Usage:

<input type="text" rangelength="1,100">

Or

$('input').validator({
  rules: {
    rangelength: [1, 100]
  }
});

pattern

• Type: RegExp

The enter value must match the pattern.

Usage:

<input type="text" pattern="j(ava)?s(cript)?">

Or

$('input').validator({
  rules: {
    pattern: /j(ava)?s(cript)?/
  }
});

equalto

• Type: String (jQuery selector)

The enter value must equal to the target element's value.

Usage:

<input id="password1" type="password" value="123456">
<input id="password2" type="password" equalto="#password1">

Or

$('#password2').validator({
  rules: {
    equalto: '#password1'
  }
});

(custom rule)

• Type: Object

A custom rule requires a message and a validator.

$('#password2').validator({
  rules: {
    exampleCustomRule: {
      message: 'Please enter at least one "@" character.',
      validator: function (value) {
        return value.indexOf('@') > -1;
      }
    }
  }
});

Messages

Changes the global default messages with $.fn.validator.setMessages(options).

// i18n/validator.zh-CN.js
$.fn.validator.setMessages({
  number: '请输入有效的数字 (仅限数字)。',
  email: '请输入有效的电子邮件地址。',
  url: '请输入有效的网址。',
  date: '请输入有效的日期。',
  required: '这是必填字段。',
  max: '请输入一个不大于 [0] 的数值。',
  min: '请输入一个不小于 [0] 的数值。',
  maxlength: '最多 [0] 个字。',
  minlength: '最少 [0] 个字。',
  pattern: '请输入匹配的值。',
  range: '请输入 [0] 至 [1] 之间的数值。',
  rangelength: '请输入长度为 [0] 至 [1] 之间的字符串。',
  equalto: '请再次输入相同值。'
});

Validators

Changes the global default validators with $.fn.validator.setValidators(options).

⬆ back to top

Options

Sets options with $().validator(options). Changes the global default options with $.fn.validator.setDefaults(options).

rules

• Type: Object
• Default: null

Add validation rules.

$('input').validator({
  rules: {
    required: true
  }
});

trigger

• Type: String (event name)
• Default: ''

The event(s) which triggers validating

$('input').validator({
  trigger: 'change'
});

filter

• Type: Function
• Default: null

Filter the value before validate

$('input').validator({
  filter: function (value) {
    return $.trim(value);
  }
});

success

• Type: Function
• Default: null

A shortcut of the "success.validator" event.

error

• Type: Function
• Default: null

A shortcut of the "error.validator" event.

⬆ back to top

Methods

General usage:

$().validator('method', argument1, , argument2, ..., argumentN)

update()

Update rule(s) from element attributes to validator instance.

<input type="number" min="1">

var $input = $('input');
var instance;

// Initialize
$input.validator();

// Change attribute
$input.attr('max', 100);

// Update rule
$input.validator('update');

addRule(name, value)

• name:
  • Type: String or Object
  • Rule name or rules object.
• value:
  • This is optional when the "name" parameter is an object.

Add new rule(s).

// Supported rule
$().validator('addRule', 'required', true);

// Custom rule
$().validator('addRule', 'heart', {
  message: 'Don\'t lose the ♥?',
  validator: function (value) {
    return /\u2665/.test(value);
  }
});

removeRule(name)

• name:
  • Type: String or Object
  • Rule name or rules object.

Remove existed rule(s);

$().validator('removeRule', 'required');
$().validator('removeRule', {
  required: false
});

addValidator(name, value)

• name:
  • Type: String or Object
  • Validator name or validators object.
• value:
  • Type: Function
  • Must return a boolean value. This is optional when the "name" parameter is an object.

Add new validator(s) to instance;

$().validator('addValidator', 'required', function (value) {
  return !!value;
});
$().validator('addValidator', {
  required: function (value) {
    return $.trim(value) !== '';
  }
});

removeValidator(name)

• name:
  • Type: String or Object
  • Validator name or validators object.

Remove validator(s) which was(were) added by addValidator;

$().validator('removeValidator', 'required');
$().validator('removeValidator', {
  required: null
});

isValid()

• (return value)
• Type: Boolean

Start a validation and return the result.

isInvalid()

• (return value)
• Type: Boolean

Start a validation and return the reversed result.

v()

A shortcut of isValid method, means "√".

x()

A shortcut of isInvalid method, means "×".

destroy()

Destroy the validator and remove the instance from target element.

⬆ back to top

Events

success.validator

This event fires when a validation is passed.

error.validator

This event fires when a validation is failed.

⬆ back to top

No conflict

If you have to use other plugin with the same namespace, just call the $.fn.validator.noConflict method to revert to it.

<script src="other-plugin.js"></script>
<script src="validator.js"></script>
<script>
  $.fn.validator.noConflict();
  // Code that uses other plugin's "$().validator" can follow here.
</script>

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Opera (latest)
• Edge (latest)
• Internet Explorer 8+

As a jQuery plugin, you also need to see the jQuery Browser Support.

Versioning

Maintained under the Semantic Versioning guidelines.

License

MIT © Fengyuan Chen

⬆ back to top