社会安全号码输入验证

Question

我有this个样本：

function ssnFormat() {
  $("#ssn").on('blur change', function() {
    text = $(this).val().replace(/(\d{3})(\d{2})(\d{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();
});

.valid {
  border: 1px solid blue;
}

.invalid {
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

我想做的这些事情是：

如果我写下面的文字我想验证这个格式123-12-1234
如果我写123456789我想在点击外部输入时转换这种格式

123-12-1234

我尝试使用下面的函数来执行此操作，但不起作用

$("#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()">

社会安全号码输入验证

Social Security Number input validation

html

javascript

css

jquery