Question

大家好，

当输入格式必须为 DD：HH（天：小时）时，我需要创建一个带有验证的输入。

如果最大天数必须为365，小时数为23:59，则如果用户输入大于默认值，则返回零（0）。

如何使用HTML和JavaScript做到这一点？

Answer 1

我试图找到一个骗子，但没有成功。

只需转换为分钟就可以了

在撰写本文时，还不清楚您的要求是什么。一个字段迫使用户键入冒号？ DDD：HH：MM？

您还可以在按键时测试max属性，如果太大则取消操作

someprogram.exe

StartUp

var maxValue = 365*24*60, ddd, hh, mm;

function testVal() {
  var dddVal = ddd.value,
       hhVal =  hh.value,
       mmVal =  mm.value;
  dddVal === isNaN(dddVal) ? 0 : +dddVal;
   hhVal === isNaN(hhVal)  ? 0 : +hhVal;
   mmVal === isNaN(mmVal)  ? 0 : +mmVal;
   var val = (dddVal*24*60+hhVal*60+mmVal)
   console.log(val,maxValue)
   document.getElementById("error").textContent = val > maxValue ? "Too long time" : "";

}

window.addEventListener("load",function() {
  ddd=document.getElementById("ddd");
   hh=document.getElementById("hh");
   mm=document.getElementById("mm");
  ddd.addEventListener("input",testVal);      
   hh.addEventListener("input",testVal);      
   mm.addEventListener("input",testVal);      
  testVal();
});

Answer 2

您可以将pattern属性与RegExp ([0-2][0-9][0-9]|[0-3][0-6][0-5]):[0-2][0-3]:[0-5][0-9]

一起使用

<input 
  id="ddhh" 
  pattern="([0-2][0-9][0-9]|[0-3][0-6][0-5]):[0-2][0-3]:[0-5][0-9]"
  placeholder="DDD:HH:MM"
  onchange="if(!this.checkValidity()){this.value=0}" 
  oninput="this.labels[0].innerHTML=this.checkValidity()?'valid':'invalid'">
<label for="ddhh"></label>

JavaScript输入格式DD：HH

2 个答案: