输入字段中输入的限号

Question

但是，它需要限制文本输入的部分。例如，我必须将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">

​

Answer 1

jquery.mask.min.js库

不是一个验证库，而是一种自动插入字符(如标点符号)的方法。验证必须分开进行。

因此，我建议使用输入掩码

​

$('[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">

​

Answer 2

你有几个选择：

1. 使用<select>

​

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

​

1. 使用<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作为输入类型，所以请确保它能在您需要它工作的平台上工作。

Answer 3

您希望验证您的输入超出了hmlt5的能力，所以像jQuery验证这样的插件是个好主意。

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

首先，要验证您的出生日期，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验证的自定义方法，并为“日期”输入validBirthDate : true设置规则

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