Question

我想让用户仅在输入日期以MM / YY格式输入日期作为描述性图像：

作为Js和React的初学者，我允许用户通过添加“ /”在MM / YY日期格式中显示日期。我正在寻找使用正则表达式模式输入有效日期或通过其他可能性（如果有）它存在。

这是我的React JS代码：

import React from "react";

import "./styles.css";

export default class Card extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      displayMessageUser: "Enter the user name",
      displayMessageDate: "12/08",
      userName: "",
      validThru: "",
      validUser: {
        status: true,
        message: ""
      },
      validDate: {
        status: true,
        message: ""
      }
    };

    this.handleChangeName = this.handleChangeName.bind(this);
    this.handleChangeDate = this.handleChangeDate.bind(this);
  }

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

  handleChangeDate(event) {
    this.setState({
      validThru:
        event.target.value.substring(0, 2) +
        "/" +
        event.target.value.substring(2, 4),
      valid: { status: true, message: "" }
    });
  }

  render() {
    const { validUser } = this.state;
    const { validDate } = 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>{this.state.validThru}</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.displayMessageUser}
            onChange={this.handleChangeName}
          />
          {!validUser.status ? (
            <span style={{ color: "#ff0000" }}>{validUser.message}</span>
          ) : null}
          <input
            type="date"
            datatype="DD MM"
            placeholder={this.state.displayMessageDate}
            onChange={this.handleChangeDate}
          />
          {!validDate.status ? (
            <span style={{ color: "#ff0000" }}>{validDate.message}</span>
          ) : null}
        </div>
      </div>
    );
  }
}

Answer 1

您可以尝试使用以下库：

react-masked输入： http://insin.github.io/react-maskedinput/

cleavejs： https://nosir.github.io/cleave.js/

TextMask： https://text-mask.github.io/text-mask/

Answer 2

只是一个想法，因此它是关于日期的。您可以使用moment软件包，然后根据格式检查其是否有效。

例如

moment(yourDate, 'D/M', true).isValid()

Answer 3

我认为正则表达式不是这里的最佳选择。对于这种情况下的有效日期，您必须确保

它还没有过期。您可以检查今天日期的年份和月份，并确保输入的日期早于该日期。
它实际上是有效的，例如month在1到12之间。

validateDate() { // Assuming variables inputYear and inputMonth are already defined and correspond to user's input. const todayDate = new Date() const todayYear = todayDate.getFullYear() // It gives you four digits so you might want to slice out the last two digits const todayMonth = todayDate.getMonth() if (!(inputMonth >= 1 && inputMonth <= 12)) return false if (inputYear > todayYear) return true else if (inputMonth > todayMonth) return true else return false }

以MM / YY格式输入日期

3 个答案: