JavaScript-Regex信用卡到期日期自动格式

我正在尝试编写一个函数，该函数将从输入元素获取内容，并尝试将输入框中输入的数字格式化为MM/YY。下面是一个解决方案，我想减少它的行数。有人能帮我写一个更好的函数来完成这个任务吗

如果你看到这个，它会自动插入斜杠。工作演示：

---

您不能在用户键入内容的同时格式化内容，不要使用onkeyup，想象一下用户的噩梦吧！（他想键入12/18，当他键入1时，输入内容立即更改为01！）

我认为更好的方法是在表单中使用两个输入字段，并在输入字段失去焦点时使用onblur事件启动格式化功能：

<script type="text/javascript">
(function() {
    document.addEventListener('DOMContentLoaded', function() {
        var myform = document.getElementById('myform');
        function formatExpMonthYear() {
            var val = this.value.replace(/\D+/g, '');
            this.value = /^\d$/.test(val) ? '0' + val : val;
            // fire a validation function/display a validation icon
        }
        myform.elements.expMonth.addEventListener('blur', formatExpMonthYear);
        myform.elements.expYear.addEventListener('blur', formatExpMonthYear);
        myform.addEventListener('submit', function() {
            // fire validation functions/display validation icons
        });
    });
})(); 
</script>
...
<form id="myform">
    <input placeholder="MM" type="text" name="expMonth" pattern="\d\d?"/>
    /
    <input placeholder="YY" type="text" name="expYear" pattern="\d\d?"/>
    <input type="submit"/>
</form>

（功能（）{
document.addEventListener（'DOMContentLoaded'，function（）{
var myform=document.getElementById（'myform'）；
函数formatExpMonthYear（）{
var val=this.value.replace（/\D+/g'，）；
this.value=/^\d$/.test（val）？“0”+val:val；
//启动验证功能/显示验证图标
}
myform.elements.expMonth.addEventListener（'blur'，formatExpMonthYear）；
myform.elements.expYear.addEventListener（'blur'，formatExpMonthYear）；
myform.addEventListener（'submit'，function（）{
//消防验证功能/显示验证图标
});
});
})(); 
...
/

这是一个增强版本，用户不输入/（自动添加）并允许删除（其他解决方案会阻止删除斜杠）：

---

谢谢，但是，在我的函数工作时，这似乎不起作用。它不包括几个案例。例如，如果我按

13

，它应该将日期格式化为

01/3

。这不是一个合理的日期，也许您可以将此答案中的str.relpace存储到一个变量中。然后，检查它是否与传入的字符串匹配，如果匹配，则输入的日期无效（因为正则表达式没有重新格式化）。对于输入无效日期的其他方式，您可能必须添加其他逻辑检查，但这将是一个错误start@MaulikSuchak：如果我理解得很好，您希望每次按键时都能更新输入字段内容，是吗？@casimirithippolyte是。@MaulikSuchak:好的，我相信，当输入失去焦点时，您需要一些东西来格式化字符串。如果我有想法，我会编辑我的答案。如果你有工作代码，你可以试着在这里发布：@Maulik-你能得到一个健壮的解决方案吗？我希望实现一个类似的。这里的问题是，在输入有效日期后，如果编辑月份，验证将无法正常工作

<script type="text/javascript">
(function() {
    document.addEventListener('DOMContentLoaded', function() {
        var myform = document.getElementById('myform');
        function formatExpMonthYear() {
            var val = this.value.replace(/\D+/g, '');
            this.value = /^\d$/.test(val) ? '0' + val : val;
            // fire a validation function/display a validation icon
        }
        myform.elements.expMonth.addEventListener('blur', formatExpMonthYear);
        myform.elements.expYear.addEventListener('blur', formatExpMonthYear);
        myform.addEventListener('submit', function() {
            // fire validation functions/display validation icons
        });
    });
})(); 
</script>
...
<form id="myform">
    <input placeholder="MM" type="text" name="expMonth" pattern="\d\d?"/>
    /
    <input placeholder="YY" type="text" name="expYear" pattern="\d\d?"/>
    <input type="submit"/>
</form>

    function formatString(e) {
  var inputChar = String.fromCharCode(event.keyCode);
  var code = event.keyCode;
  var allowedKeys = [8];
  if (allowedKeys.indexOf(code) !== -1) {
    return;
  }

  event.target.value = event.target.value.replace(
    /^([1-9]\/|[2-9])$/g, '0$1/' // 3 > 03/
  ).replace(
    /^(0[1-9]|1[0-2])$/g, '$1/' // 11 > 11/
  ).replace(
    /^1([3-9])$/g, '01/$1' // 13 > 01/3 //UPDATED by NAVNEET
  // ).replace(
  //   /^(0?[1-9]|1[0-2])([0-9]{2})$/g, '$1/$2' // 141 > 01/41
  ).replace(
    /^0\/|0+$/g, '0' // 0/ > 0 and 00 > 0 //UPDATED by NAVNEET
  ).replace(
    /[^\d|^\/]*/g, '' // To allow only digits and `/` //UPDATED by NAVNEET
  ).replace(
    /\/\//g, '/' // Prevent entering more than 1 `/`
  );
}

function cc_expires_format(string) {
    return string.replace(
        /[^0-9]/g, '' // To allow only numbers
    ).replace(
        /^([2-9])$/g, '0$1' // To handle 3 > 03
    ).replace(
        /^(1{1})([3-9]{1})$/g, '0$1/$2' // 13 > 01/3
    ).replace(
        /^0{1,}/g, '0' // To handle 00 > 0
    ).replace(
        /^([0-1]{1}[0-9]{1})([0-9]{1,2}).*/g, '$1/$2' // To handle 113 > 11/3
    );
}