对input输入框做日期输入限制的几种方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了对input输入框做日期输入限制的几种方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

用户输入一个日期的时候，我们如何对其做一个输入限制呢？试想一下，如果你输入一个13月份出来，直接弹框提醒你，会觉得冗余界面复杂，我们可以直接清掉这个3。此外，假如我们希望别人输入的日期格式如下：2024.01.12时，应该如何来规定呢？

QQ录屏20240112102820

首先，我们第一个想到的应该是使用正则来匹配

   const regex = /^\d{4}\.\d{2}\.\d{2}$/;

除了正则外，想达到一个边输入边验证输入是否合法的效果，使用事件和监听来做。

1.首先写一个input输入框，v-model绑定一个值，对input使用@input事件。

 <el-input v-model="baseData.recTime"  placeholder="不填写则为系统默认时间"
                @input="validateAndFormatDateInput"></el-input>

2.判断哪些位是小数点，哪些位是数字，当然这儿我限制的并不完全，比如说第九位不能大于3，第九位为3时，第十位不能大于1。这里只是给大家做一个参考：

 validateAndFormatDateInput() {
      // 获取输入框的值
      let inputValue = this.baseData.recTime || '';
      // 一边输入一边判断
      if (
        (inputValue.length === 5 && inputValue[4] !== '.') ||  // 第五位不是小数点
        (inputValue.length === 8 && inputValue[7] !== '.') ||  // 第八位不是小数点
        (inputValue.length === 1 && isNaN(parseInt(inputValue[0]))) ||// 第一位不是数字
        (inputValue.length === 2 && isNaN(parseInt(inputValue[1]))) ||
        (inputValue.length === 3 && isNaN(parseInt(inputValue[2]))) ||
        (inputValue.length === 4 && isNaN(parseInt(inputValue[3]))) ||
        (inputValue.length === 6 && parseInt(inputValue[5]) > 1) ||  // 第六位大于1
        (inputValue.length === 9 && parseInt(inputValue[8]) > 3)  // 第九位大于3
      ) {
        // 不符合条件，移除最后输入的字符
        this.baseData.recTime = inputValue.slice(0, -1);
      }
      // 只保留符合格式的字符
      this.baseData.recTime = this.baseData.recTime.replace(/[^\d.]/g, '');
    }

除此外使用watch来监听：文章来源地址https://www.toymoban.com/news/detail-811685.html

 "baseData.recTime": {
      handler(newVal, oldVal) {
        console.log(newVal, oldVal);

        if ((oldVal + "").length > (newVal + "").length) {
          return;
        }

        clearTimeout(this.watchTimer);
        this.watchTimer = setTimeout(() => {

          this.baseData.recTime = newVal.replace(/[^\d\.\s]/g, "");
          let _value = newVal.replace(/[^\d.]/g, "") + ""; //去掉除开数字和小数点
          console.log(_value);
          this.baseData.recTime = _value;
          if (_value == 0) {
            this.baseData.recTime = "";
            return;
          }
          if (_value.length <= 4) {
            let _len = _value.length;
            if ((_value.replace(/\D/g, "") + "").length != _len) {
              this.baseData.recTime = _value.replace(/\D/g, "");

              return;
            }

            if (_value.length == 4) {
              this.baseData.recTime = _value + ".";
            }
          }

          if (_value.length > 4) {
            let _stepValue1 = _value.slice(0, 4);
            let _len = _stepValue1.length;
            if ((_stepValue1.replace(/\D/g, "") + "").length != _len) {
              this.baseData.recTime = _stepValue1.replace(/\D/g, "");
              return;
            }
            if (_value.length == 5) {
              if (_value[4] != ".") {
                this.baseData.recTime = _value.slice(0, 4);
                return;
              }
            }
            if (_value.length > 5) {
              if (_value[5] != "1" && _value[5] != "0") {
                this.baseData.recTime = _value.slice(0, 5);
                return;
              }
              if (parseInt(_value[6]) > 2 && _value[5] == "1") {
                this.baseData.recTime = _value.slice(0, 6);
                return;
              }
              if (_value.length > 7) {
                this.baseData.recTime = _value.slice(0, 7);
                return;
              }
            }
          }
        }, 100);
      },
      immediate: false,
      deep: true
    },

到了这里，关于对input输入框做日期输入限制的几种方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！