javascript - 验证条件后显示警告消息

Question

我想在验证正则表达式条件和最大长度条件后在输入文本的右侧显示一条警告消息。

在验证每个条件并保存并显示数据后，我已经显示一条警报消息。警报消息非常难看，我想在输入文本的右侧显示一条警告消息。

这是我的codesandbox链接: https://codesandbox.io/s/l4j34xm3w9

这是我的 React JS 代码:

import React from "react";

import "./styles.css";

export default class Card extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      displayMessage: "Enter the user name",
      userName: ""
    };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    var onlyTextRegex = /[^A-Za-z]/g;
    if (event.target.value.match(onlyTextRegex)) {
      alert("Tape only text");
    } else if (event.target.value.length > 20) {
      alert("Max length 20");
    } else {
      this.setState({ userName: event.target.value });
    }
  }

  render() {
    return (
      <div className="displayCard">
        <div className="bgCreditCard">
          <div className="titleCard">
            <h1>Credit card</h1>
          </div>
          <div className="simCard">
            <img
              className="simCardImage"
              src="https://uploads.codesandbox.io/uploads/user/8f10ee4c-10fc-41b7-885a-4b795b293c1d/hh7c-chip.png"
              alt=""
            />
          </div>
          <div className="idCard">
            <h2 className="idCardNumber">7253 3266 5284 8621</h2>
          </div>
          <div className="userCard">
            <div className="userCardID">5422</div>
            <div className="userCardValidation">
              <div className="bloc1">
                Valid <br />
                thru
              </div>
              <div className="bloc2">
                month/year
                <br />
                <span>15/11</span>
              </div>
            </div>
          </div>
          <div className="userCardDescription">{this.state.userName}</div>
          <div className="cardType">
            <img
              className="simCardImage"
              src="https://uploads.codesandbox.io/uploads/user/8f10ee4c-10fc-41b7-885a-4b795b293c1d/aFYl-visa.jpg"
              alt=""
            />
          </div>
        </div>
        <div className="inputInterface">
          <input
            type="text"
            placeholder={this.state.displayMessage}
            onChange={this.handleChange}
          />
        </div>
      </div>
    );
  }
}

Answer 1

使用您的代码，我创建了一个沙箱，将消息放在输入字段下方，请检查 - https://codesandbox.io/s/4wy74rj4wx

我已将一个新的值对象添加到您的 state 中，其中包含消息和状态。如果状态不正常，则消息将显示在输入字段下方的 span 中

import React from "react";

import "./styles.css";

export default class Card extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      displayMessage: "Enter the user name",
      userName: "",
      valid: {
        status: true,
        message: ""
      }
    };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    var onlyTextRegex = /[^A-Za-z]/g;
    if (event.target.value.match(onlyTextRegex)) {
      this.setState({ valid: { status: false, message: "Tape only text" } });
    } else if (event.target.value.length > 20) {
      this.setState({ valid: { status: false, message: "Max length 20" } });
    } else {
      this.setState({
        userName: event.target.value,
        valid: { status: true, message: "" }
      });
    }
  }

  render() {
    const { valid } = this.state;
    return (
      <div className="displayCard">
        <div className="bgCreditCard">
          <div className="titleCard">
            <h1>Credit card</h1>
          </div>
          <div className="simCard">
            <img
              className="simCardImage"
              src="https://uploads.codesandbox.io/uploads/user/8f10ee4c-10fc-41b7-885a-4b795b293c1d/hh7c-chip.png"
              alt=""
            />
          </div>
          <div className="idCard">
            <h2 className="idCardNumber">7253 3266 5284 8621</h2>
          </div>
          <div className="userCard">
            <div className="userCardID">5422</div>
            <div className="userCardValidation">
              <div className="bloc1">
                Valid <br />
                thru
              </div>
              <div className="bloc2">
                month/year
                <br />
                <span>15/11</span>
              </div>
            </div>
          </div>
          <div className="userCardDescription">{this.state.userName}</div>
          <div className="cardType">
            <img
              className="simCardImage"
              src="https://uploads.codesandbox.io/uploads/user/8f10ee4c-10fc-41b7-885a-4b795b293c1d/aFYl-visa.jpg"
              alt=""
            />
          </div>
        </div>
        <div className="inputInterface">
          <input
            type="text"
            placeholder={this.state.displayMessage}
            onChange={this.handleChange}
          />
          {!valid.status ? (
            <span style={{ color: "#ff0000" }}>{valid.message}</span>
          ) : null}
          <input type="text" />
          <input type="text" />
        </div>
      </div>
    );
  }
}