Social Security Number-input-Validierung

Habe ich dieses Beispiel:

link

HTML-CODE:

<input class="required-input" id="ssn" maxlength="9" type="text" name="ssn" placeholder="123-45-6789">

CODE CSS:

.valid{
  border:1px solid blue;
}
.invalid{
  border:1px solid red;
}

CODE JS:

function ssnFormat(){
    $("#ssn").on('blur change', function () {
        text = $(this).val().replace(/(\d{3})(\d{2})(\d{4})/, "$3-$2-$4");
        if ($(this).val() == '' || $(this).val().match(text) || $(this).val().length == 0) {
            $(this).removeClass('valid').addClass('invalid');
        }else {
            $(this).removeClass('invalid').addClass('valid');
        }
    });
}

$( "#ssn" ).on('blur change', function() {
        ssnFormat();
    });

Was ich will, diese Dinge zu tun sind:

1.Wenn ich schreiben Sie den folgenden text, den ich prüfen will dieses format 123-12-1234

2.Wenn ich Schreibe 123456789 ich verändern wollen, wenn Sie außerhalb input in diesem format

123-12-1234

Versuchte ich dies mit Hilfe der Funktion unten, aber nicht arbeiten

$("#ssn").on("click", function() {
        var thisVal = $(this).val();
        var value = thisVal.replace(/[^\/\d]/g,''); //here is a problem
        $(this).val(value);
    });

Können Sie mir bitte helfen, dieses problem lösen?

Vielen Dank im Voraus!

InformationsquelleAutor John Smith | 2016-06-28
  1. 6

    Versuchen, diese

    JS:

    function myFunc() {
   var patt = new RegExp("\d{3}[\-]\d{2}[\-]\d{4}");
   var x = document.getElementById("ssn");
   var res = patt.test(x.value);
   if(!res){
    x.value = x.value
        .match(/\d*/g).join('')
        .match(/(\d{0,3})(\d{0,2})(\d{0,4})/).slice(1).join('-')
        .replace(/-*$/g, '');
   }
}

    CSS:

    .valid{
  border:1px solid blue;
}
.invalid{
  border:1px solid red;
}

    HTML:

    <input class="required-input" id="ssn" type="text" name="ssn" placeholder="123-45-6789" onBlur = "myFunc()">

    Gibt es auch eine andere Art und Weise durchzusetzen, die Benutzer immer wieder in diese Muster -

    <input class="required-input" id="ssn" type="text" name="ssn" placeholder="123-45-6789" onBlur = "myFunc()" required pattern="\d{3}[\-]\d{2}[\-]\d{4}">
    • für mich ist es nicht Arbeit, Sie können Stift bitte den link code, wenn Sie arbeiten?
    • alle spezifischen Fehler sind Sie immer?
    • Unerwartetes token .
    • es gibt eine überflüssig wurde . im code nach thisVal, die ich eingereicht habe, eine Bearbeitung.
    • bitte versuchen Sie in das richtige format erste.Ex: 123-12-1234
    • aktualisierte Antwort überprüfen Sie bitte,
    • ok, aber entfernen Sie Zeichen-Grenze ... Benutzer ist es nicht erlaubt zu schreiben, mehr Zeichen als nötig
    • - auch gezählt in Ihren 9 Länge begrenzen
    • Ich hatte zu entkommen die backslashes, damit es funktioniert. Also hier der regex: new RegExp("\\d{3}[\-]\\d{2}[\-]\\d{4}")

    InformationsquelleAutor WitVault
  2. 0

    JS:

    function myFunc() {
   var patt = new RegExp("\d{3}[\-]\d{2}[\-]\d{4}");
   var x = document.getElementById("ssn");
   var res = patt.test(x.value);
   if(!res){
    x.value = x.value
        .match(/\d*/g).join('')
        .match(/(\d{0,3})(\d{0,2})(\d{0,4})/).slice(1).join('-')
        .replace(/-*$/g, '');
   }
}

    CSS:

    .valid{
  border:1px solid blue;
}
.invalid{
  border:1px solid red;
}

    HTML:

    <input class="required-input" id="ssn" type="text" name="ssn" placeholder="123-45-6789" onBlur = "myFunc()">

    • Während dieses code-snippet lösen können, die Frage, einschließlich einer Erklärung die wirklich hilft, zu verbessern, die Qualität Ihrer post. Denken Sie daran, dass Sie die Beantwortung der Frage für den Leser in der Zukunft, und die Menschen vielleicht nicht wissen, die Gründe für deinen code-Vorschlag.
    InformationsquelleAutor user6368744
Schreibe einen Kommentar