Question

我有这个样本：

代码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.如果我写下以下文字，我想验证这种格式123-12-1234

2.如果我写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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

社会安全号码输入验证

2 个答案: