Javascript 如何对我的功能执行实时更新？JS/JQuery

（我在JSFIDLE中重新创建了它，请记住它没有任何美观的视觉效果，它只是显示的基本内容，

也在下面的HTML代码中）

我是从赤裸裸的角度写的，它背后的基本原理是它应该重新创建一个表单（通过从函数中添加HTML类），该表单在右角给出4个正确的复选标记（绿色标记），当它们全部填充时，，以及4个错误的复选标记（红色标记）当用户点击send时，它们不是全部填写的，或者根本没有填写。

但现在，例如，当一个用户填写了其中的3个，但没有一个没有填写时，它将在所有这些内容上显示一个红色复选标记，我如何使它看起来像只在未填写的内容上显示一个红色标记，并且即使他填写了未填写的内容，它也不会仅在用户刷新页面时“更新”，我如何解决这个问题

另外，我如何进行实时更新？例如，当用户键入自己的姓名并转到下一个文本字段（该字段将成为主题）时，它应该已经为姓名显示一个绿色标记，我如何修复该问题

---

提前感谢您的努力和帮助。（我知道这个表单永远不会工作，因为我需要PHP来实现它。）

我想你正在寻找这个。请参阅下面的代码片段

jQuery（'.notcked'）.on（'input'，function（）{
尼特莱格（$（本））；
});
函数validateEmail（sEmail）{
目前，该公司的一项风险风险再回电子邮件的一个风险风险再回电子邮件的一个风险再回电子邮件的一个变量变量变量的一个可能会在目前的一名名名目前的一个网络邮箱的一名名名名名名为为为目前目前目前的一名名名名名名名名名名名名为为为目前目前目前目前的一名名名名名名名名为为为为目前目前目前目前手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手[答：[答：[答：[答：[答：[答：[答：[答：[答：[答：[答：[答：[答：[答：[答：[答：[答：[答：[答：[答：[答]答：[答：[答：[答：[答]答：[答：[答：[答：[答]答：[答：[答：[答：[答]答：[答：[答：[答]答：[答：[答：[答]答：[答：[答：[答]答：[答：[答：]答：[答：[答]答：[答：]答：[答：[答]答]答：[答]答；
如果（！sEmail.match（重新邮寄））{
返回false；
}
返回true；
}
函数nietleg（elem）{
if（elem==null）{
变量元素=$（'.notchecked'）；
}
元素每个（函数（）{
var$this=$（this）；
如果（$this.val（）&&$this.attr（'id'）！='email'）{
$this.removeClass（'nochecked'）.addClass（'checked'）；
}else if（$this.attr（'id'）=='email'&&validateEmail（$this.val（）））{
$this.removeClass（'nochecked'）.addClass（'checked'）；
}否则{
$this.removeClass（'checked'）.addClass（'nochecked'）；
}
});
}

.contactmiddle>输入[type=“text”]{
背景色：黑色；
边框：1px纯白；
颜色：白色；
边缘底部：10px；
高度：45px；
宽度：100%；
边界半径：5px；
左侧填充：5px；
}
.contactright>输入[type=“text”]{
背景色：黑色；
边框：1px纯白；
颜色：白色；
宽度：100%；
高度：103px；
边缘底部：10px；
边界半径：5px；
左侧填充：5px；
}
.检查{
背景图像：url（“http://www.freeiconspng.com/uploads/check-mark-31.png");
背景尺寸：50px；
背景重复：无重复；
背景位置：右；
}
.不检查{
背景图像：url（“http://www.falconpedia.de/images/6/63/No_check.png");
背景尺寸：50px；
背景重复：无重复；
背景位置：右；
}

---

您可以添加以下Jquery/JS代码：

function nietLeeg () {
       var inputs = $('input');
        inputs.each(function(){
      var presentInput = $(this);
      if(presentInput.val() == ''){
      presentInput.removeClass('checked');
      presentInput.addClass('nochecked');
      }
      else{
      presentInput.addClass('checked');
      presentInput.removeClass('nochecked');
      }
      });

    };


  $('input').on('blur',function(){
  nietLeeg();
  })

在每个

blue

事件中，都将调用该函数。 该功能的工作方式如下：

---

如果

输入

字段为空->它将删除

选中的

类，并添加

未选中的

类。对于非空的

输入

字段，反之亦然。

使用

onblur

事件检测字段何时失去焦点，以便检查它-jQuery:

$（'input[type=text]'）。on（'blur'，function（）{code；}）非常感谢，太好了！你知道我怎样才能在电子邮件字段中有@and.com时只打一个绿色的复选标记吗？