基本上我正在尝试创建一个如下所示的简单输入文本字段:
MM/YYYY
我试过这样:
<input type="text" value="MM/YYYY" >
但是有些用户似乎发疯了并且在那里放了奇怪的价值。
所以,我试图强制他们使用javascrip或jQuery来保持MM / YYYY这样的格式。
任何指针都会受到赞赏。
解答:
以下是我想出的,在Jonas的回答的帮助下,我的工作完全像我想要的那样:
答案 0 :(得分:3)
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之前检查此方式
答案 1 :(得分:1)
您可以使用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。它还会在第二个字符后自动添加/,但这会导致编辑时出现问题,这就是为什么我建议启用上面的启用删除 ...