Skip to content

Commit 09070b1

Browse files
author
Edward Xiao
committed
- Add ['string', 'number', 'alphanumeric', 'alpha'] to validationOption.type in <Textbox /> 
1 parent d0d2e82 commit 09070b1

File tree

11 files changed

+113
-18
lines changed

11 files changed

+113
-18
lines changed

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ Tested on IE9+ and Chrome and Safari(10.0.3)
8989
|**validationOption.name** |**Opt**|**Str** |**To display in the Error message. i.e Please enter your ${name}.**|**""** |
9090
|**validationOption.check** |**Opt**|**Bool**|**To determin if you need to validate.**|**true** |
9191
|**validationOption.required** |**Opt**|**Bool**|**To determin if it is a required field.**|**true** |
92-
|**validationOption.type** |**Opt**|**Str** |**Validation type, options are ['string', 'number'~~, 'phone'~~].**|**"string"**|
92+
|**validationOption.type** |**Opt**|**Str** |**Validation type, options are ['string', 'number', 'alphanumeric', 'alpha'~~, 'phone'~~].**|**"string"**|
9393
|**validationOption.numberType** |**Opt**|**Str** |**Validation number type, options are ['decimal', 'int']. Handy when the validation type is number.**|**"decimal"**|
9494
|**validationOption.showMsg** |**Opt**|**Bool**|**To determin display the error message or not.**|**true** |
9595
|**validationOption.min** |**Opt**|**Num**|**Validation of min length when validationOption['type'] is string, min amount when validationOption['type'] is number.**|**0** |
@@ -143,7 +143,7 @@ import 'react-inputs-validation/lib/react-inputs-validation.min.css';
143143
name: 'Name', //Optional.[String].Default: "". To display in the Error message. i.e Please enter your ${name}.
144144
check: true, //Optional.[Bool].Default: true. To determin if you need to validate.
145145
required: true, //Optional.[Bool].Default: true. To determin if it is a required field.
146-
// type: 'string', //Optional.[String].Default: "string". Validation type, options are ['string', 'number'].
146+
// type: 'string', //Optional.[String].Default: "string". Validation type, options are ['string', 'number', 'alphanumeric', 'alpha'].
147147
// numberType: 'decimal', // Optional.[String].Default: "decimal". Validation number type, options are ['decimal', 'int']. Handy when the validation type is number.
148148
// showMsg: true, //Optional.[Bool].Default: true. To determin display the error message or not.
149149
// min: 2, //Optional.[Number].Default: 0. Validation of min length when validationOption['type'] is string, min amount when validationOption['type'] is number.

‎example/index.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ import { Textbox } from 'react-inputs-validation';
7878
}} // Required.[Func].Default: () => {}. Will return the value.
7979
onBlur={() => {}} // Optional.[Func].Default: none. In order to validate the value on blur, you MUST provide a function, even if it is an empty function. Missing this, the validation on blur will not work.
8080
validationOption={{
81-
type: 'number', // Optional.[String].Default: "string". Validation type, options are ['string', 'number'].
81+
type: 'number', // Optional.[String].Default: "string". Validation type, options are ['string', 'number', 'alphanumeric', 'alpha'].
8282
min: 10, // Optional.[Number].Default: 0. Validation of min length when validationOption['type'] is string, min amount when validationOption['type'] is number.
8383
max: 100 // Optional.[Number].Default: 0. Validation of max length when validationOption['type'] is string, max amount when validationOption['type'] is number.
8484
}}
@@ -652,7 +652,7 @@ class Index extends Component {
652652
console.log(e);
653653
}} // Optional.[Func].Default: none. In order to validate the value on blur, you MUST provide a function, even if it is an empty function. Missing this, the validation on blur will not work.
654654
validationOption={{
655-
type: 'number', // Optional.[String].Default: "string". Validation type, options are ['string', 'number'].
655+
type: 'number', // Optional.[String].Default: "string". Validation type, options are ['string', 'number', 'alphanumeric', 'alpha'].
656656
min: 10, // Optional.[Number].Default: 0. Validation of min length when validationOption['type'] is string, min amount when validationOption['type'] is number.
657657
max: 100, // Optional.[Number].Default: 0. Validation of max length when validationOption['type'] is string, max amount when validationOption['type'] is number.
658658
}}
@@ -873,7 +873,7 @@ class Index extends Component {
873873
name: 'Name', // Optional.[String].Default: "". To display in the Error message. i.e Please enter your ${name}.
874874
check: true, // Optional.[Bool].Default: true. To determin if you need to validate.
875875
required: true, // Optional.[Bool].Default: true. To determin if it is a required field.
876-
// type: 'string', // Optional.[String].Default: "string". Validation type, options are ['string', 'number'].
876+
// type: 'string', // Optional.[String].Default: "string". Validation type, options are ['string', 'number', 'alphanumeric', 'alpha'].
877877
// numberType: 'decimal', // Optional.[String].Default: "decimal". Validation number type, options are ['decimal', 'int']. Handy when the validation type is number.
878878
// showMsg: true, // Optional.[Bool].Default: true. To determin display the error message or not.
879879
// min: 2, // Optional.[Number].Default: 0. Validation of min length when validationOption['type'] is string, min amount when validationOption['type'] is number.
@@ -1199,7 +1199,7 @@ class Index extends Component {
11991199
name: 'Description', // Optional.[String].Default: "". To display in the Error message. i.e Please enter your ${name}.
12001200
check: true, // Optional.[Bool].Default: true. To determin if you need to validate.
12011201
required: true, // Optional.[Bool].Default: true. To determin if it is a required field.
1202-
type: 'string', // Optional.[String].Default: "string". Validation type, options are ['string', 'number'].
1202+
type: 'string', // Optional.[String].Default: "string". Validation type, options are ['string', 'number', 'alphanumeric', 'alpha'].
12031203
// showMsg: true, // Optional.[Bool].Default: true. To determin display the error message or not.
12041204
// locale: 'en-US', // Optional.[String].Default: "en-US". For error message display. Current options are ['zh-CN', 'en-US']; Default is 'en-US'.
12051205
// min: 2, // Optional.[Number].Default: 0. Validation of min length when validationOption['type'] is string, min amount when validationOption['type'] is number.

‎lib/components/Textbox.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ var reactInputsValidationCss = {
7878
"select__dropdown-icon-container": "react-inputs-validation__select__dropdown-icon-container___2ild-"
7979
};
8080
var TYPE = 'textbox';
81-
var VALIDATE_OPTION_TYPE_LIST = ['string', 'number'];
81+
var VALIDATE_OPTION_TYPE_LIST = ['string', 'number', 'alphanumeric', 'alpha'];
8282
var VALIDATE_NUMBER_TYPE_LIST = ['decimal', 'int'];
8383
var DEFAULT_MAX_LENGTH = 524288; // Default value is 524288
8484

@@ -306,6 +306,14 @@ var component = function component(_ref) {
306306
v = String(autoFormatNumber(v, VALIDATE_NUMBER_TYPE_LIST.indexOf(numberType) >= 0 ? numberType : VALIDATE_NUMBER_TYPE_LIST[0]));
307307
}
308308

309+
if (type === VALIDATE_OPTION_TYPE_LIST[2]) {
310+
v = _utils["default"].getAlphanumeric(v);
311+
}
312+
313+
if (type === VALIDATE_OPTION_TYPE_LIST[3]) {
314+
v = _utils["default"].getAlpha(v);
315+
}
316+
309317
setInternalValue(v);
310318
onChange && onChange(v, e);
311319

‎lib/components/utils.js‎

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,49 @@ var getRandomId = function getRandomId() {
2424
return Math.random().toString(36).slice(-8);
2525
};
2626

27+
var getAlphanumeric = function getAlphanumeric(v) {
28+
var res = '';
29+
String(v).split('').forEach(function (i) {
30+
var charCode = i.toLowerCase().charCodeAt(0);
31+
32+
if (charCode >= 48 && charCode <= 57 || charCode >= 97 && charCode <= 122) {
33+
res += i;
34+
}
35+
});
36+
return res;
37+
};
38+
39+
var getAlpha = function getAlpha(v) {
40+
var res = '';
41+
String(v).split('').forEach(function (i) {
42+
var charCode = i.toLowerCase().charCodeAt(0);
43+
44+
if (charCode >= 97 && charCode <= 122) {
45+
res += i;
46+
}
47+
});
48+
return res;
49+
};
50+
51+
var getNumeric = function getNumeric(v) {
52+
var res = '';
53+
String(v).split('').forEach(function (i) {
54+
var charCode = i.toLowerCase().charCodeAt(0);
55+
56+
if (charCode >= 48 && charCode <= 57) {
57+
res += i;
58+
}
59+
});
60+
return res;
61+
};
62+
2763
var utils = {
2864
camelize: camelize,
2965
toCamelCase: toCamelCase,
30-
getRandomId: getRandomId
66+
getRandomId: getRandomId,
67+
getAlphanumeric: getAlphanumeric,
68+
getAlpha: getAlpha,
69+
getNumeric: getNumeric
3170
};
3271
var _default = utils;
3372
exports["default"] = _default;

‎lib/react-inputs-validation.js‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/react-inputs-validation.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/react-inputs-validation.min.js‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/react-inputs-validation.min.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-inputs-validation",
3-
"version": "3.3.0",
3+
"version": "3.4.0",
44
"description": "React form input validation components",
55
"main": "index.js",
66
"repository": {

‎src/js/Inputs/Textbox.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import utils from './utils';
66
import { REACT_INPUTS_VALIDATION_CUSTOM_ERROR_MESSAGE_EXAMPLE, DEFAULT_LOCALE, MSG_CLASS_IDENTITIFIER, usePrevious } from './const';
77
import reactInputsValidationCss from './react-inputs-validation.css';
88
const TYPE = 'textbox';
9-
const VALIDATE_OPTION_TYPE_LIST = ['string', 'number'];
9+
const VALIDATE_OPTION_TYPE_LIST = ['string', 'number', 'alphanumeric', 'alpha'];
1010
const VALIDATE_NUMBER_TYPE_LIST = ['decimal', 'int'];
1111
const DEFAULT_MAX_LENGTH = 524288; // Default value is 524288
1212
const DEFAULT_AUTO_COMPLETE = 'on'; // Default value is on
@@ -217,6 +217,12 @@ const component: React.FC<Props> = ({
217217
if (type === VALIDATE_OPTION_TYPE_LIST[1]) {
218218
v = String(autoFormatNumber(v, VALIDATE_NUMBER_TYPE_LIST.indexOf(numberType) >= 0 ? numberType : VALIDATE_NUMBER_TYPE_LIST[0]));
219219
}
220+
if (type === VALIDATE_OPTION_TYPE_LIST[2]) {
221+
v = utils.getAlphanumeric(v);
222+
}
223+
if (type === VALIDATE_OPTION_TYPE_LIST[3]) {
224+
v = utils.getAlpha(v);
225+
}
220226
setInternalValue(v);
221227
onChange && onChange(v, e);
222228
if (err) {

0 commit comments

Comments
 (0)