javascript-如何对我的功能执行实时更新？ JS / jQuery

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript-如何对我的功能执行实时更新？ JS / jQuery，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3094字，纯文字阅读大概需要5分钟。

内容图文

(我已经在JSFiddle中对其进行了一定程度的重新创建,请记住,它没有任何美学外观,只是显示的基本内容,并且< script>也在HTML代码下方)

我已经从裸露的骨骼上写了this small function,它的基本原理是它应该重新创建一个表单(通过从函数中添加HTML中的类),当它们全部出现时,它将在右上角给出4个正确的复选标记(绿色的复选标记)填充和4个故障检查标记(红色标记)(当它们未全部填充时),或者在用户单击send时完全没有.

但是现在,例如,当用户填写其中三个但不填写一个时,它将在所有用户上显示一个红色的复选标记,我如何使其看起来像它只会在未填充的一个上显示一个红色标记,即使他填写了未填写的内容,也只有在用户刷新页面后才会“更新”,我该如何解决？

另外,例如当用户键入他们的姓名并移至下一个将作为主题的文本字段时,我该如何进行实时更新,那么它应该已经在名称上显示了绿色标记,如何解决该问题？ ？

感谢您的所有努力和事先的帮助. (我知道这种形式永远都行不通,因为我需要PHP.)

解决方法:

我认为您正在寻找这个.请参见下面的代码段

jQuery('.notchecked').on('input', function() {
  nietLeeg($(this));
});

function validateEmail(sEmail) {
  var reEmail = /^(?:[\w\!\#\$\%\&\'\*\+\-\/\=\?\^\`\{\|\}\~]+\.)*[\w\!\#\$\%\&\'\*\+\-\/\=\?\^\`\{\|\}\~]+@(?:(?:(?:[a-zA-Z0-9](?:[a-zA-Z0-9\-](?!\.)){0,61}[a-zA-Z0-9]?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9\-](?!$)){0,61}[a-zA-Z0-9]?)|(?:\[(?:(?:[01]?\d{1,2}|2[0-4]\d|25[0-5])\.){3}(?:[01]?\d{1,2}|2[0-4]\d|25[0-5])\]))$/;

  if (!sEmail.match(reEmail)) {
    return false;
  }

  return true;

}


function nietLeeg(elem) {

  if (elem == null) {
    var elem = $('.notchecked');
  }

  elem.each(function() {
    var $this = $(this);
    if ($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');
    } else {
      $this.removeClass('checked').addClass('nochecked');
    }
  });
}

.contactmiddle>input[type="text"] {
  background-color: black;
  border: 1px solid white;
  color: white;
  margin-bottom: 10px;
  height: 45px;
  width: 100%;
  border-radius: 5px;
  padding-left: 5px;
}
.contactright>input[type="text"] {
  background-color: black;
  border: 1px solid white;
  color: white;
  width: 100%;
  height: 103px;
  margin-bottom: 10px;
  border-radius: 5px;
  padding-left: 5px;
}
.checked {
  background-image: url("http://www.freeiconspng.com/uploads/check-mark-31.png");
  background-size: 50px;
  background-repeat: no-repeat;
  background-position: right;
}
.nochecked {
  background-image: url("http://www.falconpedia.de/images/6/63/No_check.png");
  background-size: 50px;
  background-repeat: no-repeat;
  background-position: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<section class="contactmiddle">
  <input class="notchecked" id="naam" name="contactpersoon" placeholder="Name" required="" type="text">
  <input class="notchecked" id="email" name="contactpersoon" placeholder="Email" required="" type="text">
  <input class="notchecked" id="subject" name="contactpersoon" placeholder="Subject" required="" type="text">
</section>
<section class="contactright">
  <input class="notchecked" id="bericht" name="contactpersoon" placeholder="Message" required="" type="text">
  <input class="knop" onclick="nietLeeg();" type="button" value="send">&nbsp;
</section>

内容总结

以上是互联网集市为您收集整理的javascript-如何对我的功能执行实时更新？ JS / jQuery全部内容，希望文章能够帮你解决javascript-如何对我的功能执行实时更新？ JS / jQuery所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端