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类.. 试试这个：

＆＃13;

$(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);
}

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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;
}

用于jQuery Vin验证的CSS

2 个答案: