React:输入验证
React: input validation
我最近开始使用React,我遇到了输入验证的问题。例如,它只是通过指令在另一个框架中实现为Angular.js。
经过一番研究,我发现了
- newforms库,看起来是当前最好的解决方案。但它相当重,不确定目前是否支持(上次更新是在7个月前(
- 另一种方法是将事件从父窗体发送到其子窗体输入,并对每个输入调用验证方法
但我找不到每个人都试图发明自己的东西的最佳实践,因此你需要写一些自己的东西。
表单验证的最佳解决方案是什么?React架构/框架(Flux/Redux(是否提供了任何解决方案?
谢谢,
我最近在React中处理过一些表单,我也有过类似的经历。我认为归根结底,React是一个非常新的东西,表单验证通常是一个很难解决的问题。这导致了某种形式验证的狂野西部,那里没有固定的标准,许多新的库试图解决这个问题(每个库都以自己的方式进行,并做出很多假设(。
我最后用formsy-react(https://github.com/christianalfoni/formsy-react)这是相当直接的,但做出了一个大的假设——我们想要验证输入onChange
。我希望我的输入呈现一个错误onBlur
,这导致我编写了一些辅助函数来创建该行为。
我还没有深入研究Redux,但在这个领域似乎有一些不错的选择(https://www.npmjs.com/package/redux-form),这可能适合你的需要。
如果你想看看我的Formsy表单验证器/助手方法的例子,请告诉我。
希望这有助于,或者至少提供了一些团结,以形成React世界的验证,到目前为止,还不清楚,也缺乏标准。
我使用的是轻量级解决方案,它非常可定制。
在onChange
上验证了输入,但可以在任何情况下更改。我们可以为文本区域、复选框、无线电创建类似的组件
var Input = React.createClass({
getInitialState: function(){
// we don't want to validate the input until the user starts typing
return {
validationStarted: false
};
},
prepareToValidate: function(){},
_debounce: function(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
},
componentWillMount: function(){
var startValidation = function(){
this.setState({
validationStarted: true
})
}.bind(this);
// if non-blank value: validate now
if (this.props.value) {
startValidation();
}
// wait until they start typing, and then stop
else {
this.prepareToValidate = _self._debounce(startValidation, 1000);
}
},
handleChange: function(e){
if (!this.state.validationStarted) {
this.prepareToValidate();
}
this.props.onChange && this.props.onChange(e);
},
render: function(){
var className = "";
if (this.state.validationStarted) {
className = (this.props.valid ? 'Valid' : 'Invalid');
}
return (
<input
{...this.props}
className={className}
onChange={this.handleChange} />
);
}
});
我们要呈现表单的组件。我们可以根据的需要添加任意多的验证规则
var App = React.createClass({
getInitialState: function(){
return {email: ""};
},
handleChange: function(e){
this.setState({
email: e.target.value
})
},
validate: function(state){
return {
email: /^(['w-]+(?:'.['w-]+)*)@((?:['w-]+'.)*'w['w-]{0,66})'.([a-z]{2,6}(?:'.[a-z]{2})?)$/.test(state.email)
}
},
render: function(){
var valid = this.validate(this.state);
return (
<div>
<Input valid={valid.email}
value={this.state.email}
onChange={this.handleChange}
placeholder="example@example.com"/>
</div>
);
}
});
这是非常简单和可定制的,对于小项目来说效果非常好。但是,如果我们是一个大型项目,并且有很多不同的形式,那么每次编写带有处理程序的应用程序组件并不是最佳选择
- Angular2 Javascript 验证 输入数字而不是字符
- 在 Angular2 中构建多部分/表单数据 POST 请求并验证输入类型文件
- 如何通过 JavaScript 验证输入字段中的值
- jQuery 验证输入文本是否仅接受数字、单词或日期
- 如何javascript验证<输入类型=文件多个>如果浏览器不支持多个
- 用于验证输入的JavaScript正则表达式超过0个字符
- 验证输入字段和块字符
- Angularjs iu.mask带有日期的验证输入
- 验证输入,更新<td>属性以匹配验证状态
- 通过点击表单外的按钮,使用required和angularjs验证输入字段
- 基于自身输入变化的角度验证输入
- 使用 javascript 验证输入数组
- 年龄验证输入框 - 计算是否超过 18 岁
- JQuery 验证输入类型文件在服务器端失败
- 如何使用jquery或javascript验证输入框的内容
- JSF 和 RichFaces 用于实时验证输入框
- Javascript/Jquery:使用数字范围验证输入
- 如何在更改时验证输入字段并启用提交按钮
- 编码器点火器未验证输入文本
- 在复选框选择后验证输入类型文本