使用 angularjs 在一定数量的数字后插入连字符

Question

我想插入连字符来验证身份证号码。例如，我的卡号格式类似于 123 - 2342 - 1232321 - 1（总共只有 15 个号码），用户不得输入超过 15 位数字。一旦用户输入上述数字集并在每个数字前后添加 space ，我需要添加连字符。第一个连字符应在 3 位数字后添加，第二个连字符应在输入 4 位数字后添加，第三个连字符应在输入 7 位数字后添加。我如何验证这一点？

<div>
    <input type="text" id="tbNum" ng-keypress="addHyphen(this)"
           placeholder="Type some values here" />
</div>

$scope.addHyphen = function(element) {
    let ele = document.getElementById(element.id); // ele doesnt have id value
    ele = ele.value.split('-').join('');   

    let finalVal = ele.match(/.{1,3}/g).join('-');
    document.getElementById(element.id).value = finalVal;
};

我尝试实现上述方式，但是element.id没有捕获输入字段的id值。

Answer 1

function addHyphen(elem) {
  if (elem.value.length <= 17) {
    if (elem.value.length === 3) {
      elem.value = `${elem.value}-`;
    }
    if (elem.value.length === 8) {
      elem.value = `${elem.value}-`;
    }
    if (elem.value.length === 16) {
      elem.value = `${elem.value}-`;
    }
  } else {
    elem.value = elem.value.slice(0, -1)
  }
};

<div>
  <input type="text" id="tbNum" onkeypress="addHyphen(this)" placeholder="Type some values here" />
</div>

你可以使用 regex，试试下面的方法

试试下面的方法

$scope.addHyphen = function(element) {
  if (elem.value.length <= 17) {
    if (elem.value.length === 3) {
      elem.value = `${elem.value}-`;
    }
    if (elem.value.length === 8) {
      elem.value = `${elem.value}-`;
    }
    if (elem.value.length === 16) {
      elem.value = `${elem.value}-`;
    }
  } else {
    elem.value = elem.value.slice(0, -1)
  }
};

PS: 下面的正则表达式也可以帮助

let num = "123234212323211";
console.log(num.replace(/(\d{3})(\d{4})(\d{7})(\d{1})/, "---"));

希望对您有所帮助

使用 angularjs 在一定数量的数字后插入连字符

Insert hyphen after certain number of digits using angularjs

input

hyphen

angularjs