jquery - 用于 jQuery Vin 验证的 CSS

Question

所以我有一个 jQuery 函数来验证 VIN 是否有效。我想做的是尝试弄清楚 CSS 它将在文本框的哪个位置圈出并在正确或正确的情况下给出绿色复选标记如果它不正确，则带有红色 X 的红色边框。底部的链接具有我想要的样子，但我无法弄清楚任何帮助将不胜感激。 http://bootstrapvalidator.com/validators/vin/

$(function() {
  $("#vin").on("keyup blur", function() {
    if (validateVin($("#vin").val()))
      $("#result").html("That's a VIN");
    else
      $("#result").html("Not a VIN");
  });
});

function validateVin(vin) {
  var re = new RegExp("^[A-HJ-NPR-Z\\d]{8}[\\dX][A-HJ-NPR-Z\\d]{2}\\d{6}$");
  return vin.match(re);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label name="vin">VIN</label>
<input type="text" id="vin" value="1FAFP40634F172825" />
<span id="result"></span>

示例片段在这里 https://stackoverflow.com/a/26408196/4122820

Answer 1

您可以添加或删除一个 css 类.. 试试这个:

$(function() {
  $("#vin").on("keyup blur", function() {
    if (validateVin($("#vin").val())) {
      $("#result").html("That's a VIN");
      $("#vin").removeClass("not-ok").addClass("ok");
    } else {
      $("#result").html("Not a VIN");
      $("#vin").removeClass("ok").addClass("not-ok");
    }
  });
});

function validateVin(vin) {
  var re = new RegExp("^[A-HJ-NPR-Z\\d]{8}[\\dX][A-HJ-NPR-Z\\d]{2}\\d{6}$");
  return vin.match(re);
}

.ok {
  border: 1px solid #090;
  background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRaDfem_skoZyavLgGvEiX37WkSH14deXWLHT1UQU4PiljxtUo) no-repeat center right;
}
.not-ok {
  border: 1px solid #900;
  background: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRx3bIOGuKEPsFxbAtH8UmzSh0XHajuDoSSAAgPK2a4-hFmzXhWBQ) no-repeat center right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label name="vin">VIN</label>
<input type="text" id="vin" value="1FAFP40634F172825" />
<span id="result"></span>