如何设置输入限制？

Question

如何验证输入长度。

1. 设置最小长度和最大长度。
2. 当用户输入更少/更多字符时，显示验证消息。

constructor(props) {
        super(props);
        this.showText = this.showText.bind(this);
        this.showText2 = this.showText2.bind(this);
      };
      showText2(e) {
        this.setState({ text2: e.target.value });
      }
......
      <input defaultValue={this.showText} onInput={this.showText2} /

Answer 1

您可以像这样定义验证- 验证演示

export default class App extends React.Component {
  state = {
    username: "",
    errors: {
      username: ""
    }
  };
  onChange = e => {
    this.setState({ [e.target.name]: e.target.value });
  };
  handleSubmit = e => {
    e.preventDefault();
    let { errors, username } = this.state;
    if (username.length < 6)
      errors.username = "You name must be more than 8 charater";
    else errors.username = "";

    this.setState({ errors });
  };
  render() {
    const { errors } = this.state;
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          className="username"
          name="username"
          type="text"
          placeholder="Enter your username"
          onChange={this.onChange}
        />
        <span style={{ color: "red" }}>{errors.username}</span>
        <input
          type="submit"
          className="btn buttonFont buttonStyle"
          id="logInButton"
          value="LOG IN"
        />
      </form>
    );
  }
}

Answer 2

您可以编写用于验证的函数或类，这些函数或类需要时间而不是所有内容，或者更好的是，您可以使用验证程序库来验证客户端的实时验证，它提供了许多验证器，例如，验证电话、字符长度、电子邮件、日期、URL，甚至regex .等。

一些流行的验证库：

• validate.js
• 是的

Answer 3

您只需要做一些事情来验证一个input，一个验证输入值的函数，以及一个UI来显示输入有错误的值，如下所示：

state = {
  inputError: false,
  inputValue: ''
};

handleChange = e => {
  if (e && e.target && e.target.value) {
    // Here you could check whatever condition for the value of the input
    // For example that the value has more than 6 characters
    if (e.target.value.length > 6) {
      this.setState({ inputError: false, inputValue: e.target.value });
    } else {
      this.setState({ inputError: true, inputValue: e.target.value });
    }
  }
};

render() {
const { inputError, inputValue } = this.state;

  return (
    <div>
      <input value={inputValue} onChange={this.handleChange} />
      {inputError && 
        <span>You need to write at least 6 characters</span>
      }
    </div>
  )
}

为了做得更好，您可以在某些CSS中反映输入中的错误(红色边框或某种输入值不正确的警告)。希望这能有所帮助。