用于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>

​

Answer 2

JS Fiddle

.checked:after {
    content:'\2713';
    background:rgb(21, 181, 21);
    width:25px;
    height:25px;
    line-height:25px;
    border-radius:50%;
    display:block;
    text-align:center;
}
#result {
    display:inline-block;
}
.error {
    border:1px solid red;
}
input:focus{
    outline:0;
}