代码之家 › 专栏 › 技术社区 › Giulia

如何验证ReactJS中的数值输入

validation reactjs

Giulia · 技术社区 · 6 年前

在Django中,可以很容易地使用MinValueValidator和MaxValueValidator来验证IntergerFields。
他们的对手是什么?

我在前端有一个表单(用ReactJS构建),其中多个字段是type=number字段,数字需要放在特定的值范围内,即大于0,小于250。

在后端,我通过使用Min/Max ValueValidator实现了对数值输入的这种控制。在ReactJS前端我该怎么办?

谢谢您!

1 回复 | 直到 6 年前

Tholle 6 年前

你仍然可以使用 min 和 max 的属性 input ,但有一些自定义逻辑来检查 输入 值不会超出该间隔。

例子

class App extends React.Component {
  state = { value: 0 };

  handleChange = event => {
    let { value, min, max } = event.target;
    value = Math.max(Number(min), Math.min(Number(max), Number(value)));

    this.setState({ value });
  };

  render() {
    return (
      <input
        value={this.state.value}
        onChange={this.handleChange}
        type="number"
        min="1"
        max="250"
      />
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

推荐文章

George Alexander · 类似电报的用户名的Regex

1 年前

Community wiki · 如何强制jQueryValidate检查数据库中的重复用户名?

1 年前

Aliaksei · 保存前进行WebFlux检查

3 年前

Nimet · 如何在regex密码模式中转义*

3 年前

Ajith S Balaji · 自定义字段woo commerce checkout上的验证错误

3 年前

Jee · PowerShell输入验证-输入不应为所有数字

7 年前

ParminderBrar · Cakehph3:如何在cakephp中验证枚举类型Mysql字段?

7 年前

Arsee · 表单数据验证

7 年前

Sadman Rizwan · 验证Firebase云函数中的存储文件数据

7 年前

James · Django使用RangeWidget验证表单

7 年前