Question

基本上我正在尝试创建一个如下所示的简单输入文本字段：

MM/YYYY

我试过这样：

<input type="text" value="MM/YYYY" >

但是有些用户似乎发疯了并且在那里放了奇怪的价值。

所以，我试图强制他们使用javascrip或jQuery来保持MM / YYYY这样的格式。

任何指针都会受到赞赏。

解答：

以下是我想出的，在Jonas的回答的帮助下，我的工作完全像我想要的那样：

https://jsfiddle.net/z2a7ydcj/4/

Answer 1

html5附带了pattern属性; - ）

<input type="text" id="foo" pattern="(0[1-9]|1[012])/[0-9]{4}" placeholder="MM/YYYY">

这里有一些jquery脚本，用于测试更改时的输入，如果无效，则重置它

jQuery(document).on("change", "#foo", function(){
   pattern = new RegExp("/(0[1-9]|1[012])/([0-9]){4}/")
   valid = pattern.test(jQuery(this).val())

   if(!valid){
     jQuery(this).val("")
   }
})

您也可以手动触发表单验证，方法是将输入包装到表单中并在其上调用checkValidity()，它将返回false并突出显示所有无效输入，因此您可以在执行任何ajaxcalls之前检查此方式

Answer 2

您可以使用js检查每个输入：

<script>
window.addEventListener("load",function(){
 document.getElementById("someid").addEventListener("input",function(){
   this.value=this.value.split("/").slice(0,2).map((el,i)=>parseInt(el,10)&&i<2?el.slice(0,2+2*i):"").join("/");
  });
});
</script>
<input id="someid" />

这只是强制执行23/1234。但是你可能会把它变得更复杂：

     var length=0;
     document.getElementById("someid").addEventListener("input",function(){
     if(length>(length=this.value.length)) return; //enable deleting
       var mapped=this.value.split("").map(function(char,i){
            switch(i){
                case 0:
                   return char=="1" || char=="0"?char:"";
                 break;
                 case 1:
                   return !isNan(parseInt(char,10))?(this[0]=="0"?char:(+char<3?char:"")):"";
                 break;
                 case 2:
                   return "/";
                 break;
                 case 3:
                 case 4:
                 case 5:
                 case 6:
                   return !isNan(parseInt(char,10))?char:"";
                 break;
                 default:
                   return "";
                 break;
            }
    },this.value);
  if(mapped.length===2) mapped.push("/");
  this.value=mapped.join("");
});

如果没有为该位置的字符填充特殊要求，则将每个字符替换为0。它还会在第二个字符后自动添加/，但这会导致编辑时出现问题，这就是为什么我建议启用上面的启用删除 ...

http://jsbin.com/razupobamu/edit?output

Javascript：仅在输入中允许月份和年份？

2 个答案: