JavaScript - Regex Kreditkarte Ablaufdatum Autoformat

Question

Ich versuche, eine Funktion schreiben, die Inhalt von Eingabeelement erhalten und versuchen, Zahlen eingegeben in Eingabefeld in MM/YY formatiert. Das Folgende ist eine Lösung, die ich habe, ich möchte die Anzahl der Zeilen reduzieren, die es hat. Kann jemand mir helfen, eine bessere Funktion zu schreiben, um dies zu tun?

Wenn Sie dies sehen, fügt es automatisch Schrägstrich ein. Arbeits Demo: https://codepen.io/ermauliks/pen/EXBryQ?editors=1010

function formatString(string) { 
     return string.replace(
      /^([1-9]\/|[2-9])$/g, '0$1/' // To handle 3/ > 03/ 
     ).replace(
      /^(0[1-9]{1}|1[0-2]{1})$/g, '$1/' // 11 > 11/ 
     ).replace(
      /^([0-1]{1})([3-9]{1})$/g, '0$1/$2' // 13 > 01/3 
     ).replace(
      /^(\d)\/(\d\d)$/g, '0$1/$2' // To handle 1/11 > 01/11 
     ).replace(
      /^(0?[1-9]{1}|1[0-2]{1})([0-9]{2})$/g, '$1/$2' // 141 > 01/41 
     ).replace(
      /^([0]{1,})\/|[0]{1,}$/g, '0' // To handle 0/ > 0 and 00 > 0 
     ).replace(
      /[^\d\/]|^[\/]{0,}$/g, '' // To allow only numbers and/
     ).replace(
      /\/\//g, '/' // Prevent entering more than 1/
     ); 
    } 
    event.target.value = formatString(value); 

Answer 1

Sie nicht etwas zur gleichen Zeit formatieren kann der Benutzer eingeben, verwenden onkeyup nicht dafür, sich vorstellen, den Alptraum für den Benutzer! (er möchte 12/18 eingeben und wenn er 1 tippt, wird der eingegebene Inhalt sofort in 01 geändert!).

Ich denke, eine bessere Art und Weise zwei Eingabefelder in dem Formular zu verwenden ist und Ihre Formatierungsfunktion ausgelöst, wenn ein Eingabefeld des Fokus mit dem onblur Ereignisse verliert:

<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> 

Answer 2

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 `/` 
); 
}