https://github.com/jsweber/easycode-validatefielddecorator
📦A very simple Form Validation Tool based on react
https://github.com/jsweber/easycode-validatefielddecorator
component form hoc javascript react validation-library
Last synced: about 2 months ago
JSON representation
📦A very simple Form Validation Tool based on react
- Host: GitHub
- URL: https://github.com/jsweber/easycode-validatefielddecorator
- Owner: jsweber
- Created: 2020-02-01T07:48:11.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-01T16:57:18.000Z (over 2 years ago)
- Last Synced: 2024-03-23T06:23:46.118Z (about 1 year ago)
- Topics: component, form, hoc, javascript, react, validation-library
- Language: JavaScript
- Homepage:
- Size: 1.6 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 25
-
Metadata Files:
- Readme: README-en_US.md
Awesome Lists containing this project
README
# validate-field-decorator
A very simple Form Validation Tool base react
[](https://travis-ci.com/jsweber/easycode-validateFieldDecorator)
[简体ä¸æ–‡](./README.md)
# 1. Install
```sh
npm install --save validate-field-decorator
```
Then use it.
# 2. Base Example
```js
import React from 'react'
import {Form, Field} from 'validate-field-decorator'
const InputWithMsg = props => {
const {
showMsg=false, // this props is from Field, a flag for showing error message
msgChildren='no message', // this props is from Field, content of error message
_ref, // this props is from Field, help locate field which happens error
onChange, // wrappered by Field
name,
required,
...rest
} = props
return (
{
required &&
*
}
{name}
{
showMsg &&
{msgChildren}
}
)
}
const InputWithValidate = Field(InputWithMsg)
class App extends React.Component{
state= {
data: {
username: 'Lee',
password: '123456'
}
}
onSubmit= () => {
// validateFields is from Form
const {validateFields} = this.props
validateFields((err, fields, ref) => {
if (err) {
// do something when error happens
ref.current && ref.current.focus()
}else {
// submit data
// post('url', this.state.data)
}
})
}
changeValue= field => val => {
const {data} = this.state
this.setState({
data: {
...data,
[field]: val
}
})
}
render(){
const {data} = this.state
return (
submit
)
}
}
export default Form(App)
```
# 3. props
Form and Field is a function which pass component and return component, you can also call them HOC.
### Form
Just set prop attribute what you want for component which returned by Form
### Field
Add the rules attribute for Field component, pass validation rules, set name and other props for component which returned by Field as a specific key that needs to be validated.
# 4. Built-in Validation
```js
const BuildValidationRule = {
required(value){
return value !== ''
},
isNumber(value) {
return typeof value === 'number' && !Number.isNaN(value)
},
isString(value){
return typeof value === 'string'
},
max(value, maxNumber){
return this.isNumber(Number(value)) && value <= maxNumber
},
min(value, minNumber) {
return this.isNumber(Number(value)) && value >= minNumber
}
}
```
# 5. Available Scripts
### npm run dev
Runs the example in the development mode.
Open http://localhost:8707 to view it in the browser.
The page will reload if you edit file in example and src.
You will also see any lint errors in the console.
### npm run build:min
The build is minified
### npm run build:full
The build is Uncompressed
### npm test
### npm lint