@fengyuanchen/validator
v0.1.0Validator
A simple jQuery form validation plugin.
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)
Rules
number
- Type:
Boolean
The enter value must be a valid number (only digits).
<input type="number">
Or
$('input').validator({
rules: {
number: true
}
});
- 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 this[0] and this[1].
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 this[0] and this[1].
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)
.
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.
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
orObject
- Rule name or rules object.
- Type:
- 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
orObject
- Rule name or rules object.
- Type:
Remove existed rule(s);
$().validator('removeRule', 'required');
$().validator('removeRule', {
required: false
});
addValidator(name, value)
- name:
- Type:
String
orObject
- Validator name or validators object.
- Type:
- value:
- Type:
Function
- Must return a boolean value. This is optional when the "name" parameter is an object.
- Type:
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
orObject
- Validator name or validators object.
- Type:
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.
Events
success.validator
This event fires when a validation is passed.
error.validator
This event fires when a validation is failed.
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
Metadata
- MIT
- Whatever
- Fengyuan Chen
- released 4/30/2016