Reactjs：输入数字验证多种方法教程

输入表单是一个基本的表单，用于接受用户的输入，表单包含不同的输入控制类型。我们必须进行验证，只接受有效的日期。在表单中进行数字验证是一件很简单的事情。

在本教程中，我们将学习多种方法来学习React应用程序中的数字输入验证。 其他版本可用：

• Angular数字输入表单验证
• 只允许在Vuejs中输入数字

React提供了多种方法来进行表单处理

用输入数字验证显示错误

在这个例子中，我们有一个有一个输入字段的表单，验证错误显示在变化事件处理程序上。

onChange--每当文本框中的输入值发生变化时执行，onClick事件--一旦表单有效就提交。

让我们创建一个反应组件：

• 在状态中声明输入表单变量的默认值
• isValid值默认为true以处理错误情况
• onChange处理程序被附加到输入框上，这将在改变输入值时被触发
• 在事件处理程序中，根据数字的正则表达式测试输入的值，如果它无效，就用isValid: false更新状态，并将输入的值改为新值。
• 在渲染方法中，显示从状态中获取的isValid的验证错误。

以下是完整的反应组件代码。

import React, { Component } from "react";

class InputNumberComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      myNumber: "",
      isValid: true
    }
  }



  validateNumberField = myNumber => {
    const numberRegEx = /\-?\d*\.?\d{1,2}/;
    return numberRegEx.test(String(myNumber).toLowerCase());
  };

  changeUrl = e => {
    const { value } = e.target;
    const isValid = !value || this.validateNumberField(value);
    console.log('isValid', isValid)
    this.setState({
      myNumber: value,
      isValid
    });
  };

  submitForm = () => {
    const { myNumber } = this.state;
    console.log("Number", myNumber);
  };

  render() {
    const { isValid, myNumber } = this.state;
    return (
      <div className="App">
        <form>
          <input
            type="text"
            name="number"
            value={myNumber}
            onChange={this.changeUrl}
          />
          {!isValid && (
            <div style={{ color: "red" }}>Entered Number is invalid</div>
          )}
          <p>          <button onClick={this.submitForm} disabled={!isValid}>
            Submit
          </button></p>
        </form>

      </div>
    );
  }
}

export default InputNumberComponent;

输出：

使用按键只接受数字

keypress是一个JavaScript原生事件，任何从键盘上输入的键都会被触发。 那么，你如何在React中处理keypress事件？

React有一个单独的语法来处理按键事件，叫做onKeyPress

  <input type="text" onKeyPress={this.onKeyPressEvent} />

这里是一个按键事件的绑定方法。

按键事件直接与DOM相连，任何输入文本的变化都会刷新页面，所以你必须添加event.preventDefault()方法来避免重新加载页面。

正则表达式只接受数字，如果输入的值没有与表达式一起传递，它就不会接受数据。

  onKeyPressEvent = (event) => {
    const keyCode = event.keyCode || event.which;
    const keyValue = String.fromCharCode(keyCode);
    if (!(new RegExp("[0-9]").test(keyValue)))
      event.preventDefault();
    return;
  }

下面是完整的反应组件代码。

import React, { Component } from 'react';

class InputNumber1 extends Component {

  onKeyPressEvent = (event) => {
    const keyCode = event.keyCode || event.which;
    const keyValue = String.fromCharCode(keyCode);
    if (!(new RegExp("[0-9]").test(keyValue)))
      event.preventDefault();
    return;
  }


  render() {
    return (
      <div>
        <input type="text" onKeyPress={this.onKeyPressEvent} />
      </div>
    );
  }
}

export default InputNumber1;