Clockwork
Clockwork is a client-side validation utilities library.
It can be used natively or as part of any javascript framework, and offers 25+ validation rules out of out the box.
Installation
Pull it via npm
npm i @primitivesocial/clockwork --save
Usage
import {_v} from "@primitivesocial/clockwork";
let name = 'primitive';
if(_v.is_string(name) && _v.min(name, 3))
window.alert('name is valid');
Available Rules
:warning: All date values must be of format YYYY-MM-DD (example: '2020-01-15')
after
Validates if a given value (date string) is after another value (date string)
let d = '2020-5-1';
after(d, '2020-1-1');
after_or_equal
Validates if a given value (date string) is after or equal to another value (date string)
let d = '2020-5-1';
after_or_equal(d, '2020-1-1');
alpha
Validates if a given value (string) contains only letters
let str = 'clockwork';
alpha(str);
alpha_dash
Validates if a given value (string) contains only letters, dashes and underscores
let str = 'primtivesocial-clock_work';
alpha_dash(str);
alpha_numeric
Validates if a given value (string) contains only letters and numbers
let str = 'clockwork123';
alpha_numeric(str);
before
Validates if a given date value (date string) is before another value (date string)
let d = '2020-5-1';
before(d, '2020-5-5');
before_or_equal
Validates if a given value (date string) is before or equal to another value (date string)
let d = '2020-5-1';
before_or_equal(d, '2020-1-1');
boolean
Validates that a given value is boolean
let str = 'clockwork';
let isValid = false;
boolean(str);
boolean(isValid);
date
Validates if a given value (date string) is a valid date
let d = '2020-5-1';
date(d);
different
Validates if a given value (numbers, strings, array and objects) is different from another value
let str = 'clockwork';
let str2 = 'primitive'
different(str, str2);
ends_with
Validates that a given value (string) ends with a specific string
let str = 'clockwork';
ends_with(str, 'work');
integer
Validates if a given value is an integer
let str = 'clockwork';
let amount = 100;
integer(str);
integer(amount);
is_array
Validates if a given value is an array
let arr = [ 'foo', 'bar'];
let amount = 100;
is_array(arr);
is_array(amount);
is_in
Validates if a given value (string) is exists in an array, or a comma separated string
let str = 'foo';
is_in(str, ['foo', 'bar']);
is_in(str, 'foo,bar')
is_string
Validates if a given value is a string
let str = 'foo';
is_string(str);
json
Validates if a given value is a json object
let obj = { foo: 'bar'};
json(obj);
length
Validates the length of a given value (string and arrays)
length('foo', 3);
length(['foo', 'bar'], 2);
matches_regex
Validates if a given value matches a specific regex
let email = "elie@leadwithprimitive.com";
matches_regex(email, "^\\S+@\\S+[\\.][0-9a-z]+$");
max
Validates if a given value (number and string) is less than the maximum specified
let amount = 100;
max(amount, 200);
let str='foobar';
max(str, 10);
min
Validates if a given value (number and string) is more than the maximum specified
let amount = 100;
min(amount, 10);
let str='foobar';
min(str, 3);
not_in
Validates if a given value (string) does not exist in an array, or a comma separated string
let str = 'foo';
not_in(str, ['clockwork', 'primitive']);
not_in(str, 'clockwork,primitive')
numeric
Validates if a given value is numeric
let amount = 100.75;
numeric(amount);
required
Validates if a given value is present
let str = 'primitive';
let word = '';
required(str);
required(word);
same
Validates if a given value (numbers, strings, array and objects) is the same as another value
let str = 'clockwork';
let str2 = 'primitive'
same(str, str2);
starts_with
Validates that a given value (string) starts with a specific string
let str = 'clockwork';
starts_with(str, 'clock');
url
Validates if a given value (string) is valid url
let str = 'https://example.com';
url(str);
uuid
Validates if a given value (string) is a valid uuid
let str = '9034dfa4-49d9-4e3f-9c6d-bc6a0e2233d1';
uuid(str);
Vue Integration
All the rules the package provides, can be used within the vue component validations option.
import {VueClockwork} from "@primitivesocial/clockwork";
Vue.use(VueClockwork);
export default {
data: () => {
return {
username: null,
email: null,
registration: {
date: null,
type: null,
},
types: [ 'student', 'individual', 'company'],
registration_ends: '2020-12-31'
}
},
validations: {
'username': 'required | alpha_dash',
'email': 'required | email',
'registration.date': 'required | date | before_or_equal:registration_ends',
'registration.type': 'when_present | is_in:types',
},
methods: {
save() {
if(this.validator.passes()) {
}
}
},
created() {
this.initValidator();
}
}
<span v-if="hasError('username')" class="text-red-900">{{ showError('username') }}</span>
- Customizing error message
created() {
this.initValidator();
this.validator.setCustomErrorMessages({
'username.alpha_dash' : 'The username must only contain letters and dashes.',
'username.required' : 'The username must not be empty.',
})
}
created() {
this.initValidator();
this.validator.extend('greater_than_ten', function(value) {
return value > 10;
})
}
Author & Contribution
Hey, I'm Elie Andraos, a web developer at Primitive.
Pull requests are always welcome. For major changes, please open an issue first to discuss what you would like to change.
You can also reach me out on twitter for any question!