react-validated-input 基于实例验证的react输入组件
react-validated-input 基于实例验证的react输入组件
JavaScript 表单验证
共12Star
详细介绍
react-validated-input
- Live Demo at http://jishun.github.io/react-validated-input/
- Instance based validation component for react, NO FORMS REQUIRED!
- Supports bootstrap, can support all kinds of input in one (built in or extended)
- It uses validate.js to do the validation.
#Why -- Why another input component?
- No! my why is, why every validation component has to base on forms? Aren't you tied of binding a form submission and calling e.preventDefault()?
- This component uses props to control validation,
- You can put the inputs into a form but you don't have to
- They are grouped by the state variable which links to their 'validate' prop, don't have to align with the UI layout.
- The validation can be triggered by the change of validate prop
- The validation scope is set with an array of instance to validate.
- The validation rule can be set in ways:
- By registering a rule set with a class name as key globally.
- By giving the rule set within the validate prop.
- By setting the rule in the input control itself
- Reach the end of this document for details.
Built in types
- text, textarea, password, email, select, radio, checkbox, file
Installation
npm install react-validated-input --save
Or You can also use the standalone build by including dist/react-validated-input.js
in your page. If you use this, make sure you have already included React, and it is available as a global variable.
Usage
//import
import Input, * as inputHelper from 'react-validated-input'
//to render
render(){
return <Input type="text" validate={this.state.validation} instance={this.state.user} propertyKey="email" rules={{presence: true, email: true}} placeholder="Email Address" label="Email"></Input>
}
//to validate, triggered by some button click, or certain onChange events
doValidate(){
//if there is only one validation group, pass the defaults like this inputHelper.validate(this, [this.state.user])
//otherwise pass the validation group name(which is the property name in t he state other than 'validation'): inputHelper.validate(this, [this.state.user], null, 'validateContent')
//The null above is an optional result collection, pass an empty object if you don't want your state instance to be changed
//Support multiple group validations, pass the 4th param as an array of strings instead of a single string will do the job: as below
inputHelper.validate(this, [this.state.user], null, ['validation', 'validateContent'])
.then(
() => {
//do something when no errors
},
(errorMessage) => {
//do something with the error message
}
)
.catch((err) => console.log(err))
}
Global Configuration
import DatePicker from 'react-datepicker'
import moment from 'moment'
import * as inputHelper from 'react-validated-input'
import validator from 'validate.js'
inputHelper.config({
validationStateProperty: 'validation', // the property name in the state object to link the validation
useWraper: true, // uses wrappers for the input, built in wrappers are bootStrap styles
errorCssClass : 'has-error', // the class applied when has error
wraningCssClass : 'has-warning', // the class applied when has warning
successCssClass : 'has-success', // the class applied when has success
feedbackCssClass : 'has-feedback', // the class applied when has feedback
propsPassThrough : true, // default to true, pass every props to the internal components
mutate : false, // default to false, not allow instance to be changed by this component, set to true it will put the error indicator into the instance when validation failed,
errorIndicatorKey : '_hasError', //the property name of the error indicator put in to the instance when mutate = true
errorMessageKey : '_errors', //the property name of the error message collection put in to the instance when mutate = true
classNameKey : '_class', // the property name used to find the validation className
rulesKey : '_rules' // the property name used to find the validation rules
})
//to validate an instance of an payment method entry, here we name the class of instance as 'payMethod', the rules for the members are set this way.
inputHelper.registerClasses({
payMethod: {
cardNumber: {
presence: true,
format: {
pattern: /^(34|37|4|5[1-5]).*$/,
message: function(value, attribute, validatorOptions, attributes, globalOptions) {
return validator.format("^%{num} is not a valid credit card number", {
num: value
});
}
},
},
name: {presence: true},
expiration: {presence: true}
}})
Extending the types
Below code shows how to extend an input type 'datepicker' with the existing react-datepicker component
import DatePicker from 'react-datepicker'
import moment from 'moment'
import * as inputHelper from 'react-validated-input'
inputHelper.extend('datepicker', {
wrapper: 'div', //the wrapper component to wrap the component, this will wrap this datepicker with bootstrap style, set to null to disable wrapping.
wrapperClass: 'form-group', // the className to put into the wrapper
className: 'form-control', //the className to put into the component
component: DatePicker, //the component reference, react class or string such as 'input'
valueProp: 'selected', // the prop name used to assign value to the component, this date picker uses 'selected' instead of 'value'
defaultProps: { dateFormat: 'MM/DD/YYYY' }, // the default props that the component needs
getValueOnChange: (e, props) => e.toString(), // to internally handle the event in onChange, otherwise it will try to retrieve e.target.value
includedLabel : false, // indicates the component does not include a label props it self, we'll renderer the label for it
setValue: (value, props) => isNaN(Date.parse(value))? null:moment(value), //the handler to pass the value from instance to the component
propsMap: [{from: 'placeholder', to: 'placeholderText'}] //map a different name for the default properties
})
Properties
- type: (the type of the input, default 'text')
- validate: (the validation prop to manage the valiation)
- instance: (the instance that the value lays in) - required
- propertyKey: (the property name of the value member ) - required
- onChange: (standard onChange event)
- noWrap: (this overrides the global config to exclude wrapper elements while rendering)
- validationClass: (the className key which used to find the rules registered globally)
- hasError, hasWanning, hasSuccess, hasFeedback: (bootStrap styled information indicator)
- defaultValue: (default value to use in the instance if no input value)
- placeholder:
- className: (the react standard className prop, will be applied to the underlying component)
- wrapperClassName: (css calssName that will be applied to the wrapper component)
- hide: (do not render the component if true)
- options: (the options to use when the type is 'select', it can be array of strings ['options1'] or objects like [{text: 'Option1', value: 1, className: '', style: ''}])
- label: (render a label for it with the text provided)
##API
- validate(component, targets, results, validatePropertyKey)
- this is a jsut helper method to help calling the nesting component's setState and wrap the callback as a promise
- the validation will be triggered by changing the validate prop's linked member in state by setState
- Params:
- component: pass 'this' in the caller component to the method
- targets: an array of the instance to validate, it will be matched with the instance set to the input to decide wheather to perform the validation
- results: optional, an empty object used to collect the results, if pass null in, the method will make a new object as state[validatePropertyKey].results
- validatePropertyKey: overrides the global config to tell the method which property of the state is used as the validation config, this is useful when inputs are grouped differently
- registerClasses(classes)
- register a set of global validation rules
- registerClass(className, rules)
- set a single set of rule to validate a single class
- config(newConfig)
- passing a config object to change the global config
- extend(inputType, componentConfig)
- extend the component with adding new types of input.
- if the input type exists, this will change the config of the type
Managing Rules:
- It will try to find a set of rules in the following order:
- If the 'rules' prop is set in the component, it will gain the priority and override the global
- it will then try instance._rules
- If there is no rules found, the validation function will try to find a className in the following order:
- It will use the validationClass prop if it has value.
- it will then try instance._class
- If it has a set of rules, it will pass it to validate.js to do the validation.
- If it has a className, it will try to find the rules from global config made by registerClass and rgisterClasses. then use it.
- the property name '_rules' and '_class' can be overridded with the config API method
Extending validator
- Please refer to the document of validate.js for the format of the rules.
- import the validator instance to begin with
import validator from 'validate.js'
Build
npm install
make js
Contribute?
----- Working in Progress -----
- Send a pull request to me
- Or extend an input type with the extend method and publish it!