更改当前网页上显示的部分(即不是全部）文本

Change some (i.e. not all) displayed text on current web page

本文关键字：全部 文本 网页 显示      更新时间：2023-09-26

在Java等语言或Qt for C++等GUI框架中，可以获得用户无法更改的某些文本块（例如标签小部件）的句柄，但程序可以根据满足的某些条件对其进行修改。我希望能够在一些JavaScript代码中在HTML网页上做同样的事情。

例如，考虑一个用于输入用户凭据的网页。如果凭据无效，我希望在当前网页上显示一条消息，而不必加载一个全新的页面。

我已经让它使用HTML文本框或文本区域工作，设置为禁用，只读，并进行一些显示样式更改（通过CSS）。更改会导致运行一些JavScript代码，这可能会导致这些文本框或文本区域的值字段发生更改。虽然这还可以，但似乎不对。有没有更正统的方法来实现这一点？

当然。有几个库可以处理这个问题。

您可能要求进行表单验证。如果是这样，请尝试jQuery和jQuery的验证扩展库：demo

或者，您可能要求一个更通用的useobserver模式。如果是这样的话，请尝试许多用于JavaScript的MVVM/MVC库中的一个，如backbone.js或knockout.js（还有ember、agility、angular和spine）：jsfiddle

edit：还要注意，如果您的需求只是标准表单验证，那么您可以在jQueryvalidate中完成它，而无需任何代码——只需直接在HTML元素本身上添加属性，指示验证规则是什么。不幸的是，HTML5数据属性在编写时并不存在，所以您将验证规则作为CSS类应用。

编辑2：还请注意，jQuery开箱即用验证支持远程验证，例如凭据或用户名已经存在的场景：演示或文档

使用jQuery的.submit()，使用它可以将事件处理程序绑定到"提交"JavaScript事件，或者在元素上触发该事件。

示例：

$("form").submit(function() {
      if ($("input:first").val() == "correct") {
        $("span").text("Validated...").show();
        return true;
      }
      $("span").text("Not valid!").show().fadeOut(1000);
      return false;
    });

您还可以使用jQuery的.toggle()来显示/隐藏任何分区

阅读W3C的这篇文章，以更好地理解W3的建议，通过DOM提供客户端验证并添加错误文本（稍微过时）

您应该试试jQuery的.change();

假设您的HTML输入具有ID:

<input type='text' id='idOfTheField' name='email'>

你应该试试：

$('#idOfTheField').change(function(){
  //Do stuff with the value.
  //Wich is $('#idOfTheField').value() by the way.
});

要使用Web服务器操作数据，您必须执行AJAX调用，如下所示：

$.ajax({
  url: "parse.php",
  data: {
      email:$('#idOfTheField').value()
  }
}).done(function() { 
  // Add the CSS class ".valid" that makes the text field green, for example.
  $('#idOfTheField').addClass("valid"); 
});
相关文章：