validator.js
===


Lightweight JavaScript form validation, that had minimal configuration and felt natural to use. No dependencies, support UMD.

> ⚠️ The v1 version document preview is here.

Install · Usage · React · Hook · React Native · Form · API · npm · License

Used in the browser client

Refer to the validator.min.js file in the application, manually download and link validator.min.js in HTML.

``html

`

It can also be downloaded via UNPKG:

CDN: UNPKG | jsDelivr | Githack | Statically | bundle.run

![Open in CodeSandbox](https://codesandbox.io/embed/quirky-bohr-m75fx?fontsize=14&theme=dark)

`html


`bash
$ npm install validator.tool --save


Or

`jsx
import { useState, useRef } from 'react';
import Validator from 'validator.tool';

function Example() {
const [data, setData] = useState({
email: 'kennyiseeyou@gmail.com'
});
const validator = useRef(
new Validator({
initValues: { ...data },
})
);
return (


`jsx
import { useState } from 'react';
import { useValidator } from '@validator.tool/hook';

function Example() {
const [data, setData] = useState({
email: 'kennyiseeyou@gmail.com'
});
const { validator } = useValidator({
initValues: { ...data },
});
return (


`jsx
import { useRef, useState } from 'react';
import { useValidator } from '@validator.tool/hook';

function Demo() {
const [data, setData] = useState({
email: 'kennyiseeyou@gmail.com'
});
const { validator, handleReset, handleSubmit } = useValidator({
initValues: data,
validate: (value, values, field) => {
if (field === 'password' && !value) {
return 'Required!';
}
}
});

const onSubmit = (value: Values) => {
console.log('value', value)
}
const onReset = (value: Values) => {
setData({ ...value });
}

function handleChange(env) {
const target = env.target;
const value = target.type === "checkbox" ? target.checked : target.value;
const name = target.name;
setData({ ...data, [name]: value });
}

return (
onSubmit={handleSubmit(onSubmit)}
onReset={handleReset(onReset)}
onChange={handleChange}
onBlur={handleChange}
// onInput={handleChange}
>


`jsx
import { useValidator } from '@validator.tool/hook';

const { validator, forceUpdate } = useValidator({});
`

$3

You need to wrap validator with Element.

![](https://snack.expo.dev/@jaywcjlove/validatorjs-test)

`jsx
import React, { useRef } from 'react';
import { Text, View, Button } from 'react-native';
import { useValidator } from '@validator.tool/hook';

const WelcomeScreen = () => {
const [text, onChangeText] = React.useState('Useless Text');
const { validator, forceUpdate } = useValidator({
initValues: { text },
validate: (value = '', values, field) => {
if (field === 'username' && value.length > 3) {
return '!! username > 3';
}
},
});
return (



{validator.message('username', text)}

onPress={() => {
validator.showMessages();
forceUpdate();
}}
title="Submit"
color="#841584"
/>

);
};
`

API

`ts
export declare type Value = (number | FormDataEntryValue)[] | number | boolean | null | FormDataEntryValue;
export declare type Values = Partial>;
export declare type Fields = Partial>;
export declare type Rules = Partial>;
export interface RulesOption {
/* Validate the form's values with function. /
validate?(value?: Value, values?: Validator['values'], field?: string): string;
}
export declare type ValidatorOption = {
messagesShown?: boolean;
rules?: Rules;
initValues?: Values;
form?: HTMLFormElement | null;
validate?: RulesOption['validate'];
};
export default class Validator {
constructor(options?: ValidatorOption);
validate?: RulesOption['validate'];
form?: HTMLFormElement | null;
fields: Fields;
rules: Rules;
values: Values;
initValues?: Values;
set resetInitValue(val: Values);
messagesShown: boolean;
errorMessages: Partial>;
showMessages: () => boolean;
hideMessages: () => boolean;
getForm: () => HTMLFormElement | null | undefined;
setForm: (form: HTMLFormElement) => void;
/* How you define validation rules and add messages into the form. /
message: (field: string, inputValue?: Value | undefined, options?: RulesOption | undefined) => string | undefined;
setValues: (values?: Values) => void;
getValues: () => Values;
reset: () => Values;
fieldValid: (field: string) => boolean;
/**
* Returns a boolean if all the fields pass validation or not.
* @returns Boolean
*/
allValid(): boolean;
}
`

Use with third-party packages

$3

![npm bundle size](https://bundlephobia.com/package/validator)

String validation

`jsx
import isEmail from 'validator/es/lib/isEmail';

function Demo() {
return (



{validator.current.message('email', data.email, {
validate: (val) => !isEmail(val) ? The ${val} must be a valid email address. : ''
})}


`bash
$ git https://github.com/jaywcjlove/validator.js.git
$ cd validator.js # Into the directory
$ npm install # or yarn install
$ npm install --workspaces # Install monorepo dependency
`

To develop, run the self-reloading build:

`bash
$ npm run lib:watch # Monitor the compiled package validator.tool
$ npm run hook:watch # Monitor the compiled package @validator.tool/hook
`

Run Document Website Environment.

`bash
$ npm run start
`

To contribute, please fork Hotkeys.js, add your patch and tests for it (in the /packages/*/__tests__/.{js,jsx,ts,tsx} folder) and submit a pull request.

`bash
$ npm run coverage
$ npm run test # Development model
``

Related

- chriso/validator.js String validation
- rickharrison/validate.js Lightweight JavaScript form validation library inspired by CodeIgniter.

Contributors

As always, thanks to our amazing contributors!

Made with github-action-contributors.

License

Licensed under the MIT License.