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库

并不是要成为验证库，而只是一种自动插入标点符号之类的方法。验证必须单独进行。

因此，我建议使用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">

Answer 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作为输入类型，因此请确保它可以在您需要的平台上运行。

Answer 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 validate绑定，可以将以下内容添加为jQuery Validate的自定义方法，并为“日期”输入validBirthDate : true

设置规则

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

Answer 4

尝试一下...

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

在输入栏中输入的极限数

4 个答案: