Question

我有一张表格，比如

<form>
<input type="text" id="abc" name="abc" value="abc"><img src="right.png">
<input type="text" id="abc1" name="abc" value=""><img src="wrong.png">
<input type="submit" id="submit" value="submit">
</form>

但我不明白如何展示这一点。当输入不为空时<img src="right.png">，如果输入为空，则为<img src="wrong.png">

Answer 1

标记您的输入：

<input type="text" required="required" minlength="1">

在CSS中，您可以这样做：

input:required:valid::after{
    content: url(path/to/right.png);
}
input:required:invalid::after{
    content: url(path/to/wrong.png);
}

如果你必须支持某些horrible old browser

，请回到@ divy3993＆＃39>

Answer 2

我会选择@dtanders但是使用JavaScript的简单解决方案不会对你造成伤害。

＆＃13;

function myFunction() {
    var x = document.getElementById("abc");
    var curVal = x.value;
    var imageRW = document.getElementById('img_right_wrong');
    if (curVal == "")
    {
 			//wrong.png   
      imageRW.src = "http://findicons.com/files/icons/1671/simplicio/128/notification_error.png";
    }
    else
    {
 			//right.png
      imageRW.src = "https://d3n7l4wl5znnup.cloudfront.net/assets/images/icon-right.png";
    }
}

＆＃13;

<form>
<input type="text" id="abc" onkeyup="myFunction()" name="abc" value="">
<img src="http://findicons.com/files/icons/1671/simplicio/128/notification_error.png" id="img_right_wrong" width="2%">
<input type="submit" id="submit" value="submit">
</form>

＆＃13;

<强>更新

<强> Working Fiddle

Answer 3

似乎您想要进行动态表单验证。所以你可以添加事件监听器：

<input id="abc" name="abc" onchange="checkInput()">

和JavaScript：

function checkInput() {
  if ($("#abc").val().length == 0) {
    // change image
  }
}

但是使用jQuery插件更好： link

Answer 4

使用ng-show可以在angularjs中轻松完成。

  <!DOCTYPE html>
  <html>
    <head>
            <title>Chat Application</title>
            <script src="./scripts/angular.min.js"></script>
            <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">

    </head>
    <body ng-app="chatApp">
        <div>
            <input type="text" name="FirstName" ng-model="text" ng-init='text=""'><br>
                    <img src="right.png"  alt="right" ng-show="text.length >0">
                    <img src="wrong.png" alt="wrong" ng-show="text.length === 0">
                    <input type="submit" id="submit" value="submit">
        </div>

        <script src="./scripts/app.js"></script>
    </body>
  </html>

如果输入为空，则显示图片或其他图片

4 个答案: