2016-08-31 2 views
-2

Ich arbeite an einer HTML-Seite, auf der ich einige Eingabesteuerelemente habe. In diesen Eingabesteuerungen muss der Benutzer eine Gleitkommazahl eingeben, z. "1234,56" mit vier ganzen Zahlen vor dem Komma und zwei ganzen Zahlen dahinter (maximal). Wie kann ich während oder nach der Eingabe des Wertes herausfinden, ob der Wert korrekt ist (Anzahl der ganzen Zahlen vor und hinter dem Punkt/Komma; nur ganze Zahlen).Überprüfen, ob der eingegebene Benutzerwert in einer HTML-Eingabe eine Fließkommazahl ist

Vielen Dank im Voraus!

+0

Für zukünftige Referenz werden Sie wahrscheinlich auf dieser Frage nach unten abgestimmt, weil es keine Anstrengung von Ihnen zeigt, sogar Ihr eigenes Problem zu versuchen. Diese Website ist für die Suche nach Hilfe mit Code, der nicht richtig funktioniert, keine Website für freiberufliche Arbeit. – leigero

+0

Sorry, ich habe diese Frage nur hinzugefügt, weil ich weiß, dass viele Entwickler das gleiche Problem haben, und ich habe eine Lösung gefunden, die ich öffentlich machen wollte, damit jeder davon profitieren kann. –

+0

Dumm ich, ich habe gerade gemerkt, dass du deine eigene Frage beantwortet hast, damit alles, was ich hier dachte, zunichte gemacht wird. Fortfahren. – leigero

Antwort

1

Wir können dies tun, indem wir unser Steuerelement auf ein Formular setzen, indem wir die Mustereigenschaft der Eingabe und eine Übergabeschaltfläche verwenden, um das Muster mit dem Wert zu vergleichen.

Erstes Beispiel:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <title>Checking floatnumbers</title> 
     <meta charset="utf-8" /> 
    </head> 
    <body> 
     <form> 
      <input type="text" 
        maxlength="7" 
        placeholder="____,__" 
        title="Please use format ####,##" 
        pattern="\d{1,4}(|\.|,)?\d{1,2}" /> 
      <br /> 

      <!-- For testing input patterns --> 
      <input type="submit" 
        value="Submit" /> 
      <br /><br /> 

      <!-- Resets/clears the form --> 
      <input type="reset" 
        value="Reset" /> 
     </form> 
    </body> 
</html> 

Zuerst wird die Eingabe vom Typ "Text" sein müssen, nicht "Nummer" wie gewohnt. Das Muster bedeutet, dass der Benutzer 1 bis 4 Zahlen vor dem Punkt oder Komma eingeben kann/muss. Der Punkt/Komma und die folgenden 1 bis 2 Dezimalstellen können eingegeben werden, aber es ist nicht notwendig.

Wenn ein Benutzer p.e. "12345" und klickt auf den Submit-Button, es wird ein Fehler mit dem Text aus dem Property-Titel angezeigt.

Vielleicht möchten einige Benutzer keine Nummer wie "1,23" eingeben, sondern - weil sie es eilig haben - nur ", 23". Also schauen wir uns das zweite Beispiel an.

Zweites Beispiel:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <title>Checking floatnumbers</title> 
     <meta charset="utf-8" /> 
    </head> 
    <body> 
     <form> 
      <input type="text" 
        maxlength="7" 
        placeholder="____,__" 
        title="Please use format ####,##" 
        pattern="\d{0,4}(|\.|,)?\d{1,2}" /> 
      <br /><br /> 

      <!-- For testing input patterns --> 
      <input type="submit" 
        value="Submit" /> 
      <br /><br /> 

      <!-- Resets/clears the form --> 
      <input type="reset" 
        value="Reset" /> 
     </form> 
    </body> 
</html> 

Wie Sie die Eingabe vor dem Punkt/Komma sehen können, hat ein Minimum von 0 und maximal 4 So ist es möglich, eine floatnumber wie“eingeben, 23 ".

Und wenn wir negativ floatnumbers im Eingangs wir ändern das Muster zu "^[+-]?\d{0,4}(|\.|,)?\d{1,2}" und die maxlength bis 8.

Weitere Mitteilung Mit dem Muster eingeben möchten wir oben noch eine Zahl wie „12345“ eingeben was in unserem Fall nicht stimmt. Das korrekte Muster muss sein: "^[+-]?\d{1,4}((\.|,)\d{1,2})?" oder "^[+-]?\d{0,4}((\.|,)\d{1,2})?"

Verwandte Themen