Javascript 如何设置输入限制？

如何验证输入长度

设置最小长度和最大长度

当用户输入更少/更多字符时显示验证消息

构造函数（道具）{
超级（道具）；
this.showText=this.showText.bind（this）；
this.showText2=this.showText2.bind（this）；
};
显示文本2（e）{
this.setState（{text2:e.target.value}）；
}
......
您可以这样定义验证-

导出默认类App扩展React.Component{
状态={
用户名：“”，
错误：{
用户名：“
}
};
onChange=e=>{
this.setState（{[e.target.name]：e.target.value}）；
};
handleSubmit=e=>{
e、 预防默认值（）；
让{errors，username}=this.state；
如果（username.length<6）
errors.username=“您的姓名必须超过8个字符”；
else errors.username=“”；
this.setState（{errors}）；
};
render（）{
const{errors}=this.state；
返回(
{errors.username}
);
}
}
您可以编写一个函数或某个类来进行验证，这需要时间，而且不能涵盖所有内容，或者更好的是，您可以使用validators库来验证客户端实时验证，它提供了许多验证程序，例如，验证电话、字符长度、电子邮件、日期、URL，甚至regex。。。等等

一些流行的验证库：




您只需要验证一些东西就可以验证
输入
，这是一个验证输入值的函数，以及一个当输入值错误时显示的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>
  )
}

状态={
输入者：false，
输入值：“”
};
handleChange=e=>{
if（e&&e.target&&e.target.value）{
//在这里，您可以检查输入值的任何条件
//例如，该值包含6个以上的字符
如果（例如，目标值长度>6）{
this.setState（{inputError:false，inputValue:e.target.value}）；
}否则{
this.setState（{inputError:true，inputValue:e.target.value}）；
}
}
};
render（）{
const{inputError，inputValue}=this.state；
返回(
{输入者&&
你至少需要写6个字符
}
)
}

为了做得更好，您可以使用一些CSS来反映输入中的错误（红色边框或输入值不正确的某种警告）。希望这有帮助。
你能再解释一下吗？我有意见。当用户写不到6个符号时，程序写“youκsumbols-less 6”的细节就丢失了。具体需要什么没有在报告中解释detail@user12522448选中为您创建的此项
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>
    );
  }
}

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>
  )
}