HTML-Form-Feld - How erfordern eine Eingabe-format

Der einfachste Weg, dies zu tun ist, indem Sie einfach mehrere Felder:

<div>
    Phone:
   (<input type="text" name="phone-1" maxlength="3">)
   <input type="text" name="phone-2" maxlength="3">-
   <input type="text" name="phone-3" maxlength="4">
</div>
<div>
    SSN:
    <input type="text" name="ssn-1">-
    <input type="text" name="ssn-2">-
    <input type="text" name="ssn-3">
</div>

Während dieser Ansatz ist sicherlich leicht, es ist nicht so toll. Der Benutzer muss drücken Sie tab, oder klicken Sie auf jedes Feld, um die Daten einzugeben, und es ist nichts (anderes als die üblichen Sinne), verhindert, dass Sie vom Eintritt in andere Dinge als stellen.

Ich immer das Gefühl, dass, wenn es um die Validierung, die weniger bekommen Sie die Benutzer sind, desto besser. Lassen Sie Sie geben Sie Ihre Telefonnummer ein, in welchem format auch immer Sie mögen, dann Sie Peeling, entfernen alles außer Ziffern. So kann der Benutzer geben Sie "5555551212" oder "(555) 555-1212", aber die Datenbank wird immer halten "5555551212".

Die andere Sache zu beachten ist, dass HTML5 bietet einige schöne spezielle Typen für den Telefon-Nummern (aber nicht Sozialversicherungsnummern). Einen modernen browser kümmert sich um die Validierung von Eingaben und, noch besser, mobile Geräte, die numerische Tastatur und nicht auf die gesamte Tastatur.

Gegeben, dass die besten Art und Weise, um Ihre form ist diese:

<div>
    <label for="fieldPhone">Phone: </label>
    <input type="tel" id="fieldPhone" placeholder="(555) 555-1212">
</div>
<div>
    <label for="fieldSsn">SSN: </label>
    <input type="text" id="fieldSsn" name="ssn" placeholder="555-55-5555" pattern="\d{3}-?\d{2}-?\d{4}">
</div>

Wenn der Benutzer einen modernen browser, diese mit der Anwender-Seite der input-Validierung für Sie. Wenn Sie nicht, Sie muss eine Validierung Bibliothek oder polyfill. Es gibt eine ganze Liste von HTMl5 Formular-Validierung polyfills hier:

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#wiki-web-forms

Bleibt jetzt normalisieren Sie Ihre Daten, wenn Sie in der Datenbank speichern.

Der ideale Ort, das zu tun, wäre das back-end; es sagt nicht, wo Sie Ihr Formular gehen, obwohl, so vielleicht Sie don T haben zu sagen, wie Dinge verarbeitet werden, die auf dem back-end. Sie können dies also in der front-end statt. Zum Beispiel mit jQuery:

$('form').on('submit', function(){
    $(this).find('input[type="tel"]').each(function(){
        $(this).val() = $(this).val().replace(/[\s().+-]/g, '');
    });
    $(this).find('input[name="ssn"]').each(function(){
        $(this).val() = $(this).val().replace(/-/g, '');
    });
});

Dies ist nicht eine perfekte Ansatz entweder: wenn Sie die Validierung in dieser Funktion, und die Validierung fehlschlägt, wird der Benutzer sehen, seine oder Ihre Eingabe ersetzt durch die normalisierten Versionen, die kann verwirrend sein.

Der beste Ansatz wäre die Verwendung von AJAX und .serialize; nicht nur können Sie haben eine bessere Kontrolle über die Benutzeroberfläche, aber Sie können alles tun, die Validierung, die Sie wollen. Aber das ist wohl ein wenig über das hinaus, was müssen Sie jetzt tun.

Beachten Sie, dass Telefon-Validierung ist die schwierigste. Die HTML5-Telefon-Validierung ist sehr Freizügig, es den Menschen ermöglicht, geben Sie internationale Telefonnummern, die haben ziemlich komplizierte Formate. Auch die Menschen in den USA wird manchmal geben Sie Telefon-Nummern wie "+1 (555) 555-1212", und dann haben Sie 8 Ziffern statt 7. Wenn Sie wirklich wollen, Sie zu beschränken auf 7 Ziffern haben, müssen Sie fügen Sie Ihre eigenen benutzerdefinierten Validierung:

/^\(?\d{3}\)?[.\s-]?\d{3}[.\s-]\d{4}$/

Deckt alle gängigen Varianten Menschen nutzen (Zeiten, Leerzeichen, Bindestriche, Klammern), und immer noch erlauben, nur 7-stellige Telefonnummern aus den USA.

Hier ein jsfiddle Nachweis der HTML5-Validierung und Normalisierung:

http://jsfiddle.net/Cj7UG/1/

Ich hoffe, das hilft!

InformationsquelleAutor Ethan Brown

Hier ist eine komplette Lösung mit jquery und jquery tools validator:
regex-Muster, die behandeln würde, beiden Fällen ist :

^(\d{3}-|(\d{3})\s)\d{2}-\d{4}$

HTML:

<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js" type="text/javascript"></script>
<link href="http://jquerytools.org/media/css/validator/form.css" type="text/css" rel="stylesheet">
<script>
$(function() {
    $("#myform").validator();
});
</script>
</head>
<body>
<form id="myform">
    <input type="text" name="name" pattern="^(\d{3}-|\(\d{3}\)\s)\d{2}-\d{4}$" maxlength="30" />
    <br>
    <input type="submit" name="submit" value="submit" />
</form>
</body>

Klicken Sie hier für die demo auf jsfiddle

InformationsquelleAutor Goran.it