社會安全號碼輸入驗證

Question

我有這樣的例子：

link

代碼HTML：

<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(); 
    }); 

我想要做的這些事情是：

1.如果我寫了下面的文字我想2.如果我寫123456789來驗證這種格式123-12-1234

我想在這種格式下點擊外部輸入時進行轉換

123-12-1234 

我試圖通過使用函數b elow但不起作用

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

你能幫我解決這個問題嗎？

在此先感謝！

Answer 1

試試這個

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, ''); 
 
    } 
 
}

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

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

也有另一種方式來總是強制用戶輸入模式 -

<input class="required-input" id="ssn" type="text" name="ssn" placeholder="123-45-6789" onBlur = "myFunc()" required pattern="\d{3}[\-]\d{2}[\-]\d{4}"> 

Answer 2

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, ''); 
 
    } 
 
}

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

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