在输入字段中输入的限制数量答案

【问题标题】：Limit numbers entered in input field在输入字段中输入的限制数量
【发布时间】：2018-09-03 20:20:28
【问题描述】：

我得到了这个工作，但是它需要限制文本输入的部分。例如，我必须将 DD 限制为最多 31 个，MM 限制为最多 12 个，并将 YYYY 从 1900 年限制到 2018 年

知道该怎么做吗？

$('[data-type="dateofbirth"]').mask('00/00/0000');

function submitBday1() {
  var Q4A = "";
  var Bdate = document.getElementById('bday1').value;
  var darr = Bdate.split('/');
  var temp = darr[0];
  darr[0] = darr[1];
  darr[1] = temp;
  var fmtstr = darr.join('/');
  var Bday = +new Date(fmtstr);
  Q4A += ~~((Date.now() - Bday) / (31557600000));
  var theBday = document.getElementById('resultBday1');
  theBday.innerHTML = Q4A;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>
<input type="text" pattern="[0-9]*" data-type="dateofbirth" maxLength="10" id="date" class="form-control" placeholder="DD/MM/YYYY">

【问题讨论】：

你为什么不使用日期输入？
正如@Luca 所暗示的那样：使用日期输入 (<input type="date">)：demo。
客户端不想弹出日期。我之前用过。想输入日期。
你可以隐藏弹出窗口，这样行吗？
使用正则表达式验证输入中的文本也是一种选择。

标签： javascript jquery

【解决方案1】：

jquery.mask.min.js 库

并不是一个验证库，只是一种自动插入标点符号等字符的方法。验证必须单独进行。

因此，我建议使用Inputmask:

$('[data-type="dateofbirth"]').inputmask({alias: 'datetime', inputFormat: 'dd/mm/yyyy'});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/RobinHerbots/Inputmask/4.x/dist/jquery.inputmask.bundle.js"></script>


<input type="text" data-type="dateofbirth" maxLength="10" class="form-control" placeholder="dd/mm/yyyy">

【讨论】：

这太棒了！顺便说一句，知道我们是否也可以限制年份吗？
搞定了。 $('[data-type="dateofbirth"]').inputmask({alias: 'datetime', yearrange: { minyear: 1900, maxyear: 2018 }, inputFormat: 'DD/MM/YYYY'});

【解决方案2】：

你有几个选择：

使用<select>:

<select>
    <option>1</option>
    <option>2</option>
    <option>...</option>
    <option>31</option>
</select>

使用<input type="number" min="1" max="31">:

<label>Day
<input type="number" min="1" max="31" step="1" value="1" />
</label>
<label>Month
<input type="number" min="1" max="12" step="1" value="1" />
</label>
<label>Year
<input type="number" min="1900" max="2018" step="1" value="2018" />
</label>

注意：并非所有浏览器都支持 number 作为输入类型，因此请确保它可以在您需要的平台上运行。

【讨论】：

select options 是不可能的。 number 也是不可能的，因为如果我有 3 个输入字段，则该方法有效。我只有 1 个输入字段。

【解决方案3】：

您想要验证您的输入超出 HMLT5 的能力，因此像 jQuery Validate 这样的插件将是一个好主意。

您可能必须先研究基本用法，但它相当简单且非常有用。

首先，要验证您的出生日期，moment.js 会很容易：

moment(document.getElementById('bday1').value, 'DDMMYYY').isValid() moment(document.getElementById('bday1').value, 'DDMMYYY').year() <= 2018 或更好 moment(document.getElementById('bday1').value, 'DDMMYYY').year() <= moment().year()

要将其绑定到 jQuery 验证中，您可以添加以下作为 jQuery Validate 的自定义方法，并为您的“日期”输入设置规则validBirthDate : true

$.validator.addMethod('validBirthDate', function(value){
    return moment(value, 'DDMMYYY').isValid() && moment(value, 'DDMMYYY').year() <= moment().year();
})

【讨论】：

【解决方案4】：

试试这个...

$('[data-type="dateofbirth"]').mask({
   alias: 'datetime',
   inputFormat: 'dd/mm/yyyy',
   min: '31/12/1900',
   max: '31/12/2018'
});

【讨论】：