更改某些（不是全部）显示当前网页

Question

上的文字在语言如Java或GUI框架，比如Qt的为C++，就可以得到一个处理文本的某些块（例如标签控件）用户不能改变，但程序可以根据某些条件得到满足而修改。我希望能够在HTML网页上从一些JavaScript代码中做同样的事情。

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

我已经得到它使用HTML文本框或文本区域，设置为禁用工作，具有一定的显示风格变化（通过CSS）只读。更改会导致一些JavScript代码运行，这可能会导致这些文本框或textareas的值字段发生更改。虽然这可以工作，但它似乎并不正确。有没有更正统的方式来完成这一点？

Answer 1

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

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

或者你要的可能是一个更通用的使用观察者模式。如果是这样，请尝试为JavaScript等众多MVVM/MVC库（例如backbone.js或knockout.js（也包括烬，敏捷，角度和脊柱））之一：jsfiddle

编辑：另请注意，如果您的需要只是标准表单验证，您可以在jQuery验证中完成它，而无需任何代码说明 - 只需在HTML元素上直接添加属性，即可指示验证规则的内容。不幸的是，HTML5数据属性在写入时并未出现，因此您将验证规则应用为CSS类。

编辑2：也注意到，jQuery验证出的现成支持远程验证，如证书或用户名，已经存在的场景：demo或documentation

Answer 2

你应该尝试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"); 
});