jQuery Vin驗證的CSS

Question

因此，我有一個可驗證VIN是否有效的jQuery函數。我要做的是嘗試弄清楚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小提琴

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