react-validation-form
v0.2.4
Published
A form component for React Library, supporting form validation.
Downloads
19
Readme
ReactForm
思想
高阶组件
Usage 使用
WARNING: This component is still under development
To install react-form:
npm install react-validation-form --save
How to use:
import React, { Component, PropTypes } from 'react';
import { createForm, FormItem } from 'react-validation-form';
const propTypes = {
value: PropTypes.string,
};
class Input extends Component {
constructor(props) {
super(props);
}
render() {
return <input type="text" value={this.props.value} {...this.props} />
}
}
Input.propTypes = propTypes;
class TestForm extends Component {
render() {
return (
<form>
<FormItem>
<Input {...this.props.form.getInputProps('username', {
initialValue: 'username',
onlyFirst: true, // default false
validates: [
{
rules: [{
required: true
},
{
validator: (value, rule, formdata, callback) => {
setTimeout(() => {
callback(new Error('不合法的输入'));
}, 1000);
},
}],
triggers: ['onChange', 'onBlur'],
},
]
})} />
</FormItem>
<FormItem>
<Input {...this.props.form.getInputProps('password', {
validates: [
{
rules: [{
validator: (value, rule, formdata, callback) => {
setTimeout(() => {
callback(new Error('不合法输入'));
}, 1000);
},
}],
triggers: ['onChange', 'onBlur'],
},
]
})} />
</FormItem>
<FormItem>
<Input {...this.props.form.getInputProps('nickname', {
validates: [
{
rules: [
{
required: true,
type: 'string',
max: 20,
min: 5,
},
{
validator: (value, rule, formdata, callback) => {
setTimeout(() => {
callback(new Error('不合法输入'));
}, 1000);
},
}],
triggers: ['onBlur'],
},
]
})} />
</FormItem>
<button onClick={(e) => {
e.preventDefault();
this.props.form.validateAllInputs((err, namevalues) => {
console.log(err);
})
}}>提交</button>
</form>
)
}
}
// now you can use the form.
export default createForm(TestForm);
问题记录
问题1
对于异步验证,举个例子,加入是 onChange
触发验证,那么对于频繁修改表单,会不断地触发回调,造成显示上出现验证和验证结束UI之间的闪烁
(初步解决方案,通过观察现在的值跟之前放进去的值是否一致来决定是否触发回调)
经验证,以上方法仍然会闪动,当来回删除键入同一个字符即可。
解决方案: 目前采用记录一个 validateId 来解决,记录每一个验证的 validateId,效果良好
问题2
加入脏检查
原因:一个表单元素可能在 onChange
的时候不触发验证,然后在 onBlur
的时候触发验证,如果表单元素的值没有被改过,不应该触发验证,使用脏检查可以避免不必要的验证
问题3
onChange
与 onBlur
是检测两种错误的,onChange
检测出了一个错误,然后错误显示出来,接着触发 onBlur
,此时 onBlur
触发的错误应该和 onChange
触发的错误同时显示出来,而不是只显示 onChange
触发的错误,但是两次触发 onBlur
只应该显示最后一次发生的错误,但是,onChange
和 onBlur
可能是检测同一个错误的,这就要求程序要记录 validates 在数组中的序号,这样就能达到要求,不过目前 Validator
的设计是传入 rules 数组(会把 validates
数组进行转换变成 rules
数组),所以现在暂时是显示最后一次验证得出的错误。