Validieren und Ändern der Zeiteingabe im laufenden Betrieb

Wie kann ich in Javascript die Benutzerzeiteingabe mit dem regulären Ausdruck und der string.replace-Funktion validieren und ändern, sodass der Benutzer die Änderungen nicht direkt vornimmt, sondern im laufenden Betrieb validiert und ändert ?Validieren und Ändern der Zeiteingabe im laufenden Betrieb

Zum Beispiel könnte die Benutzereingabe 1.12p13:121,12PM sein, aber das Endergebnis sollte immer 1:12 PM lauten.

Hat jemand Beispiele, wie man das macht?

PS. Ich weiß, dass Timepicker ist ein Weg, effizienter Weg, aber ich habe die Benutzereingaben in diesem Fall verwenden

Quelle

2012-10-29 Victor

Ich habe eine Antwort nicht für Sie, aber ich habe einige Ratschläge haben. Wenn Sie eine Methode suchen, um dies zu tun, und wenn Sie HTML5 unterstützen können, verwenden Sie das [input DOM event] (https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/input) und für die Liebe von allen Dingen süß und flauschig, benutze keine Keyup- oder Keydown-Events. Sie werden Kopfschmerzen nach Kopfschmerzen verursachen. Das ist alles, wenn Sie HTML5 leider unterstützen können. : \ –

Leider arbeite ich mit einigen wirklich alten Quellen, die nicht einmal jQuery verwenden, geschweige denn HTML5. – Victor

Haben Sie schon eine Lösung gefunden? – JDB

Ein einfaches regex Sie als Ausgangspunkt verwenden:

(\d{1,2})\s*[.,:;]\s*(\d{1,2})\s*(([Aa]|[Pp])[Mm]?)?

^  ^^ ^^  ^^^  ^
Hour group |  | Minutes | | |   M is optional 
     | Valid separators | | Case-insensitivity 
     |  |   | AM/PM group 
     ------------------------------Allow spaces

Sie‘ d muss noch validieren, dass die Zeit gültig ist (59:99 ist wahrscheinlich nicht gültig), aber dies würde es zumindest einfacher machen, die Zeichenkette in Javascript zu analysieren. Nachdem Sie es analysiert haben, können Sie es wie gewünscht ausdrucken.

BEARBEITEN: Oops. Habe vergessen, dass Javascript keine benannten Gruppen unterstützt. Verwenden Sie einfach nummerierte Gruppen mit demselben Effekt.

Beispiel
Was das Heu ... hier ist ein komplettes Arbeitsbeispiel. Wenn bestätigen (und was mit ungültiger Eingabe zu tun) sind Sie überlassen:

<html> 
    <head> 
     <script> 
function parseTime(timeString){ 
    var timePattern = /(\d{1,2})\s*[.,:;]\s*(\d{1,2})\s*(([Aa]|[Pp])[Mm]?)?/; 
    var timeMatch = timePattern.exec(timeString); 

    var INVALID = null; 

    if (timeMatch !== null){ 
     var hour = timeMatch[1]; 
     var minute = timeMatch[2]; 
     var ampm = timeMatch[3]; 

     if (minute < 0 || minute > 59) 
      return INVALID; 

     if (ampm != ""){ 
      if (hour < 1 || hour > 12) 
       return INVALID; 

      ampm = ampm.substring(0,1).toUpperCase() == "A" ? "AM" : "PM"; 
     } else { 
      if (hour > 23) 
       return INVALID; 

      ampm = (hour < 13 ? "AM" : "PM"); 
      hour = hour % 12; 
      if (hour == 0) hour = 12; 
     } 

     return hour + ":" + minute + " " + ampm; 
    } else { 
     return INVALID; 
    } 
} 

function unitTest(){ 
    var testStrings = [ 
     ["1:30 PM", "1:30 PM"], 
     ["1.30p", "1:30 PM"], 
     ["1;30a", "1:30 AM"], 
     ["59:99 PM", null], 
     ["0,30", "12:30 AM"], 
     ["15:00", "3:00 PM"], 
     ["abc", null] ]; 

    var testResults; 
    testResults = "<table><tr><th>Input</th><th>Expected</th><th>Actual</th></tr>"; 

    for (var i = 0; i < testStrings.length; i++){ 
     testResults += 
      "<tr>" + 
       "<td>" + testStrings[i][0] + "</td>" + 
       "<td>" + testStrings[i][1] + "</td>" + 
       "<td>" + parseTime(testStrings[i][0]) + "</td>" + 
       "<td>" + (testStrings[i][1] == parseTime(testStrings[i][0]) ? 
          "<span style='color:green'>Success</span>" : 
          "<span style='color:red'>Failure</span>") + 
       "</td>" + 
      "</tr>"; 
    } 

    testResults += "</table>"; 

    this.document.getElementById("results").innerHTML = testResults; 
} 
     </script> 
    </head> 
    <body onload="unitTest();"> 

     <div id="results"> 
     </div> 

    </body> 
</html>

Ausgang:

Eingang erwartete tatsächliche
13.30 01.30 1: 30 Uhr Success
1.30p 13.30 01.30 Erfolg
1; 30a 01.30 01.30 Erfolg
59:99 PM null null Erfolg
0,30 0.30 12: 3 00.00 Erfolg
15.00 03.00 03.00 Erfolg
abc null null Erfolg

Quelle

2012-10-29 16:33:32 JDB

Meine Antwort wurde mit einem Arbeitsbeispiel aktualisiert. – JDB

Validieren und Ändern der Zeiteingabe im laufenden Betrieb

Antwort

Verwandte Themen