Skip to content

Commit eba5644

Browse files
stuyamstuyam
committed
First tryyyyyya
0 parents  commit eba5644

File tree

6 files changed

+322
-0
lines changed

6 files changed

+322
-0
lines changed

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
2+
node_modules/

‎License

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License
2+
3+
Copyright (c) 2017 Dockwa.
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in
13+
all copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21+
THE SOFTWARE.

‎dist/simple-react-validator.js

+129
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
// Simple React Validator v0.0.1 | Created By Dockwa | MIT License | 2017
2+
;(function(root, factory) {
3+
if (typeof define === 'function' && define.amd) {
4+
define(['react'], factory);
5+
} else if (typeof exports === 'object') {
6+
module.exports = factory(require('react'));
7+
} else {
8+
root.Simple-react-validator = factory(root.React);
9+
}
10+
}(this, function(React) {
11+
'use strict';
12+
13+
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
14+
15+
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
16+
17+
var SimpleReactValidator = function () {
18+
function SimpleReactValidator() {
19+
_classCallCheck(this, SimpleReactValidator);
20+
21+
this.fields = [];
22+
this.showErrors = false;
23+
this.typeRules = {
24+
'required': { message: 'This field is required', rule: function rule(val) {
25+
return this._runRegex(val, /.+/);
26+
} },
27+
'required_checkbox': { message: 'You must check the check box', rule: function rule(val) {
28+
return val === true;
29+
} },
30+
'email': { message: 'Please enter a valid email address', rule: function rule(val) {
31+
return this._runRegex(val, /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i);
32+
} },
33+
'number': { message: 'Please enter a number', rule: function rule(val) {
34+
return this._runRegex(val, /^\d+$/);
35+
} },
36+
'alpha_num': { message: 'Please enter only letters or numbers', rule: function rule(val) {
37+
return this._runRegex(val, /^[A-Z0-9]*$/i);
38+
} },
39+
'alpha_num_under': { message: 'Please enter only letters or numbers', rule: function rule(val) {
40+
return this._runRegex(val, /^[A-Z0-9_]*$/i);
41+
} },
42+
'expiration': { message: 'Please enter a valid expiration date', rule: function rule(val) {
43+
return this._runRegex(val, /^(([0]?[1-9]{1})|([1]{1}[0-2]{1}))\s?\/\s?\d{2}$/);
44+
} },
45+
'credit-card': { message: 'Please enter a valid credit card number', rule: function rule(val) {
46+
return this._runRegex(val, /^\d{4}\s{1}\d{4,6}\s{1}\d{4,5}\s?\d{0,8}$/);
47+
} },
48+
'min': { message: 'Please enter :REPLACE: or more characters', rule: function rule(val, option) {
49+
return val.length >= option;
50+
} },
51+
'max': { message: 'Please enter no more than :REPLACE: characters', rule: function rule(val, option) {
52+
return val.length <= option;
53+
} }
54+
};
55+
}
56+
57+
_createClass(SimpleReactValidator, [{
58+
key: 'displayErrors',
59+
value: function displayErrors(boolean) {
60+
this.showErrors = boolean || true;
61+
}
62+
63+
// return true if all fields cleared, false if there is a validation error
64+
65+
}, {
66+
key: 'allValid',
67+
value: function allValid() {
68+
for (var key in this.fields) {
69+
if (this.fields.hasOwnProperty(key)) {
70+
if (this.fields[key] === false) {
71+
return false;
72+
}
73+
}
74+
}
75+
return true;
76+
}
77+
}, {
78+
key: 'message',
79+
value: function message(field, value, typeString, className) {
80+
this.fields[field] = true;
81+
var types = typeString.split('|');
82+
var parts;
83+
var lastParts;
84+
for (var i = 0; i < types.length; i++) {
85+
// if the validation does not pass the test
86+
value = typeof value === 'undefined' || value === null ? '' : value;
87+
parts = types[i].split(':');
88+
lastParts = types[i].split(':');
89+
lastParts.shift();
90+
// pass in the value being tested and any parts after the rule being specified
91+
if (this.typeRules[parts[0]].rule.apply(this, [value].concat(lastParts)) === false) {
92+
this.fields[field] = false;
93+
if (this.showErrors === true) {
94+
if (parts.length > 1) {
95+
return this._errorHTML(this.typeRules[parts[0]].message.replace(':REPLACE:', parts[1]), className);
96+
} else {
97+
return this._errorHTML(this.typeRules[parts[0]].message, className);
98+
}
99+
}
100+
}
101+
}
102+
}
103+
}, {
104+
key: 'customMessage',
105+
value: function customMessage(message, className) {
106+
if (isset(message)) {
107+
return this._errorHTML(message, className);
108+
}
109+
}
110+
}, {
111+
key: '_errorHTML',
112+
value: function _errorHTML(message, className) {
113+
var name = "form-error-message";
114+
if (isset(className)) {
115+
name += " " + className;
116+
}
117+
return React.createElement('div', { className: name }, message);
118+
}
119+
}, {
120+
key: '_runRegex',
121+
value: function _runRegex(value, regex) {
122+
return value.toString().match(regex) !== null;
123+
}
124+
}]);
125+
126+
return SimpleReactValidator;
127+
}();
128+
return SimpleReactValidator;
129+
}));

‎gulpfile.js

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
// include plug-ins
2+
var gulp = require('gulp');
3+
var umd = require('gulp-umd');
4+
var inject = require('gulp-inject-string')
5+
var rename = require('gulp-rename');
6+
var uglify = require('gulp-uglify');
7+
var babel = require('gulp-babel');
8+
var HEADER_COMMENT = '// Simple React Validator v0.0.1 | Created By Dockwa | MIT License | 2017\n';
9+
10+
var gutil = require('gulp-util');
11+
12+
// JS concat, strip debugging and minify
13+
gulp.task('build', function() {
14+
gulp.src('./src/simple-react-validator.js')
15+
.pipe(babel({
16+
presets: ['es2015']
17+
}))
18+
.pipe(umd({
19+
exports: function() {
20+
return 'SimpleReactValidator';
21+
},
22+
dependencies: function() {
23+
return [
24+
{
25+
name: 'react',
26+
amd: 'react',
27+
cjs: 'react',
28+
global: 'React',
29+
param: 'React'
30+
}
31+
]
32+
}
33+
}))
34+
.pipe(inject.prepend(HEADER_COMMENT))
35+
// This will output the non-minified version
36+
.pipe(gulp.dest('./dist/'))
37+
38+
// minify
39+
.pipe(uglify().on('error', function(err) {
40+
gutil.log(gutil.colors.red('[Error]'), err.toString());
41+
this.emit('end');
42+
}))
43+
.pipe(inject.prepend(HEADER_COMMENT))
44+
.pipe(rename({ extname: '.min.js' }))
45+
.pipe(gulp.dest('./dist/'));
46+
});
47+
48+
gulp.task('watch', function() {
49+
gulp.watch(['src/*'], ['build']);
50+
});
51+
52+
gulp.task('dist', ['build']);

‎package.json

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{
2+
"name": "simple-react-validator",
3+
"version": "0.0.1",
4+
"description": "A painless React Validator.",
5+
"main": "dist/simple-react-validator.min.js",
6+
"dependencies": {},
7+
"devDependencies": {
8+
"babel-preset-es2015": "^6.24.0",
9+
"gulp": "^3.9.1",
10+
"gulp-babel": "^6.1.2",
11+
"gulp-inject-string": "^1.1.0",
12+
"gulp-rename": "^1.2.2",
13+
"gulp-uglify": "^2.1.2",
14+
"gulp-umd": "^0.2.1",
15+
"gulp-util": "^3.0.8"
16+
},
17+
"scripts": {
18+
"dist": "gulp dist",
19+
"watch": "gulp watch",
20+
"prepublish": "npm run dist"
21+
},
22+
"repository": {
23+
"type": "git",
24+
"url": "git+https://github.com/dockwa/simple-react-validator.git"
25+
},
26+
"keywords": [
27+
"react",
28+
"validator",
29+
"form",
30+
"form-validator",
31+
"simple-react-validator"
32+
],
33+
"author": "Stuart Yamartino",
34+
"license": "MIT",
35+
"bugs": {
36+
"url": "https://github.com/dockwa/simple-react-validator/issues"
37+
},
38+
"homepage": "https://github.com/dockwa/simple-react-validator#readme"
39+
}

‎src/simple_react_validator.js

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
class SimpleReactValidator{
2+
constructor(){
3+
this.fields = [];
4+
this.showErrors = false;
5+
this.typeRules = {
6+
'required' : {message: 'This field is required', rule: function(val){return this._runRegex(val,/.+/)}},
7+
'true' : {message: 'You must check the check box', rule: function(val){return val === true}},
8+
'email' : {message: 'Please enter a valid email address', rule: function(val){return this._runRegex(val,/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i)}},
9+
'number' : {message: 'Please enter a number', rule: function(val){return this._runRegex(val,/^\d+$/)}},
10+
'float' : {message: 'Please enter a number', rule: function(val){return this._runRegex(val,/^\d+.?\d*$/)}},
11+
'alpha_num' : {message: 'Please enter only letters or numbers', rule: function(val){return this._runRegex(val,/^[A-Z0-9]*$/i)}},
12+
'alpha_num_under' : {message: 'Please enter only letters or numbers', rule: function(val){return this._runRegex(val,/^[A-Z0-9_]*$/i)}},
13+
'same' : {message: 'Please enter a valid expiration date', rule: function(val){return this._runRegex(val,/^(([0]?[1-9]{1})|([1]{1}[0-2]{1}))\s?\/\s?\d{2}$/)}},
14+
'card_expiration' : {message: 'Please enter a valid expiration date', rule: function(val){return this._runRegex(val,/^(([0]?[1-9]{1})|([1]{1}[0-2]{1}))\s?\/\s?\d{2}$/)}},
15+
'card_number' : {message: 'Please enter a valid credit card number', rule: function(val){return this._runRegex(val,/^\d{4}\s{1}\d{4,6}\s{1}\d{4,5}\s?\d{0,8}$/)}},
16+
'min' : {message: 'Please enter :REPLACE: or more characters', rule: function(val, option){return val.length >= option}},
17+
'max' : {message: 'Please enter no more than :REPLACE: characters', rule: function(val, option){return val.length <= option}},
18+
};
19+
}
20+
21+
displayErrors(boolean){
22+
this.showErrors = boolean || true;
23+
}
24+
25+
// return true if all fields cleared, false if there is a validation error
26+
allValid(){
27+
for (var key in this.fields) {
28+
if( this.fields.hasOwnProperty(key) ) {
29+
if(this.fields[key] === false){
30+
return false;
31+
}
32+
}
33+
}
34+
return true;
35+
}
36+
37+
message(field, value, typeString, className){
38+
this.fields[field] = true;
39+
var types = typeString.split('|');
40+
var parts;
41+
var lastParts;
42+
for(var i = 0; i < types.length; i++){
43+
// if the validation does not pass the test
44+
value = typeof value === 'undefined' || value === null ? '' : value;
45+
parts = types[i].split(':');
46+
lastParts = types[i].split(':');
47+
lastParts.shift();
48+
// pass in the value being tested and any parts after the rule being specified
49+
if(this.typeRules[parts[0]].rule.apply(this, [value].concat(lastParts)) === false){
50+
this.fields[field] = false;
51+
if(this.showErrors === true){
52+
if(parts.length > 1){
53+
return this._errorHTML(this.typeRules[parts[0]].message.replace(':REPLACE:', parts[1]), className);
54+
} else {
55+
return this._errorHTML(this.typeRules[parts[0]].message, className);
56+
}
57+
}
58+
}
59+
}
60+
}
61+
62+
customMessage(message, className){
63+
if(isset(message)){
64+
return this._errorHTML(message, className);
65+
}
66+
}
67+
68+
_errorHTML(message, className){
69+
var name = "form-error-message";
70+
if(isset(className)){
71+
name += " " + className;
72+
}
73+
return React.createElement('div', {className: name}, message);
74+
}
75+
76+
_runRegex(value, regex){
77+
return value.toString().match(regex) !== null;
78+
}
79+
}

0 commit comments

Comments
 (0)