javascript - 如何仅设置数值输入字段的边框颜色？

Question

我需要将输入字段的边框颜色设置为绿色，但前提是该字段中的值为数字。我怎样才能做到这一点？这是我的 html:

  <div class="well">
            <input type="text" class="field" value="1245"/><br/><br/>
            <input type="text" class="field" value="efg#21"/><br/><br/>
            <input type="text" class="field" value="34536"/><br/><br/>
            <input type="text" class="field" value="abcd"/><br/><br/>
            <input type="text" class="field" value="12asd"/><br/><br/>
        </div>
    </div>

您能为此建议一个有效的 js/jquery 代码吗？

Answer 1

我会将正则表达式与 jQuery 结合起来。这也会响应用户的输入。

function validate() {
  $("input").each(function () {
    if ($(this).val().match("^[0-9]+$")) {
      $(this).css("border-color","green")
    } else {
      $(this).css("border-color","red")
    }
  });
}

$("input").on("keyup", validate);
validate()

input {
  border-width:1px;
  border-style:solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="well">
    <input type="text" class="field" value="1245"/><br/><br/>
    <input type="text" class="field" value="efg#21"/><br/><br/>
    <input type="text" class="field" value="34536"/><br/><br/>
    <input type="text" class="field" value="abcd"/><br/><br/>
    <input type="text" class="field" value="12asd"/><br/><br/>
</div>