在React中校验text类型输入框的日期并根据输入日期显示对应星期几

以下是可直接运行的完整实现代码：

class Inputdate extends React.Component {
  state = {
    inputDate: '',
    errorMsg: '',
    weekday: ''
  }

  // 日期合法性校验
  validateDate = (dateStr) => {
    // 先匹配dd-mm-yyyy格式
    const dateReg = /^(\d{1,2})-(\d{1,2})-(\d{4})$/
    const match = dateStr.match(dateReg)
    if (!match) {
      return { valid: false, error: '请输入dd-mm-yyyy格式的日期' }
    }

    const day = parseInt(match[1], 10)
    const month = parseInt(match[2], 10)
    const year = parseInt(match[3], 10)

    // 月份范围校验
    if (month < 1 || month > 12) {
      return { valid: false, error: '月份范围必须是1-12' }
    }

    // 各月默认最大天数
    const daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
    // 闰年2月天数调整
    if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
      daysInMonth[1] = 29
    }

    // 日期范围校验
    if (day < 1 || day > daysInMonth[month - 1]) {
      return { valid: false, error: `当月日期范围必须是1-${daysInMonth[month - 1]}` }
    }

    return { valid: true, date: new Date(year, month - 1, day) }
  }

  // 计算对应星期
  getWeekday = (date) => {
    const weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
    return weekArr[date.getDay()]
  }

  handleInputChange = (e) => {
    const inputValue = e.target.value
    this.setState({ inputDate: inputValue, errorMsg: '', weekday: '' })
    
    // 输入完成后自动校验，也可根据需求改为输入框失焦、点击提交按钮时触发
    if (inputValue.length === 10) { // dd-mm-yyyy格式固定为10位字符
      const validateResult = this.validateDate(inputValue)
      if (!validateResult.valid) {
        this.setState({ errorMsg: validateResult.error })
        return
      }
      const weekday = this.getWeekday(validateResult.date)
      this.setState({ weekday: weekday })
    }
  }

  render() {
    return (
      <div>
        <input
          name="date"
          type="text"
          value={this.state.inputDate}
          placeholder="dd-mm-yyyy"
          onChange={this.handleInputChange}
        />
        {this.state.errorMsg && <p style={{color: 'red'}}>{this.state.errorMsg}</p>}
        {this.state.weekday && <p>对应星期：{this.state.weekday}</p>}
      </div>
    )
  }
}

核心逻辑说明 #

• 格式校验：先用正则限制输入必须符合dd-mm-yyyy的结构，避免不符合格式的内容进入后续校验逻辑
• 日期合法性校验：先判断月份在1-12区间，再根据年份判断是否为闰年调整2月天数，最后校验日期是否在对应月份的合法范围内
• 星期计算：校验通过后生成标准Date对象，通过getDay()方法获取0-6的索引，映射到提前定义的中文星期数组即可得到对应星期
• 交互逻辑：默认输入长度达到10位时自动触发校验，也可根据业务需求调整为提交按钮点击、输入框失焦时触发，减少实时输入时的错误提示干扰

内容的提问来源于stack exchange，提问作者Abhishek Roy