Question

首先，让我先说我对JavaScript或客户端脚本完全一无所知。我所做过的所有编程都是服务器端，主要是PHP，并且还有一些Java用于测量。

所以，我完全不知道从哪里开始解决这个问题。我有一个非常严格的密码规则的应用程序。用户首次获得帐户时会收到默认密码，必须立即更改。但是，没有人第一次读取密码要求，因此，创建新密码总是需要多次尝试。

所以，我创建了一个这样的表：

<table>
<tr><td align="right">&bull; Not be the same as your old password</td><td align="left">Not Met</td></tr>
<tr><td align="right">&bull; Not be fewer than eight characters in length</td><td align="left">Not Met</td></tr>
<tr><td align="right">&bull; Contain at least one number</td><td align="left">Not Met</td></tr>
<tr><td align="right">&bull; Contain at least one uppercase letter</td><td align="left">Not Met</td></tr>
<tr><td align="right">&bull; Contain at least one lowercase letter</td><td align="left">Not Met</td></tr>
</table>

//Later on, inside some <form> tags

<tr><td align="right">Old password:&nbsp;</td><td align="left"><input type="password" id="oldpass" name="oldpass" tabindex="1" /></td></tr>
<tr><td align="right">New password:&nbsp;</td><td align="left"><input type="password" id="newpass1" name="newpass1" tabindex="2" /></td></tr>
<tr><td align="right">New password, again:&nbsp;</td><td align="left"><input type="password" id="newpass2" name="newpass2" tabindex="3" /></td></tr>

我想要发生的是当用户在字段中输入文本时，JavaScript（我猜）在后台运行并将“Not Met”文本更改为“Met”并使其变为绿色或密码验证的内容。这样做的最佳方式是什么？

TIA。

Answer 1

根据您使用的javascript框架（如果有），实现方式会有所不同。但概念将是相同的：

1 - 您应该观察输入密码的给定文本输入的onchange事件。

2 - 当事件被触发时，它应该调用一个函数来验证密码是否满足最低要求，因此你还需要一个函数来进行验证。

3 - 如果确实有最低要求，只需更改特定范围的文本和样式。

对于Prototype JS，它会是这样的（想象你显示的第一个表具有DOM解析的id）：

function isValid(elem){
 // example:
 if($(elem).value.length < 8) return false;
 return true;
}

$('newpass1').observe('change', function(){ 
  if(isValid('newwpass1'){
    // it would be easier and faster with an id in the table cell
    var elem = $$('table#tableid td')[8];
    elem.innerHTML = 'Met';
    elem.setStyle({color:'green'});
   }
});

您还可以使用即用型解决方案，例如jQuery Validation，并跳过所有此类验证的内部编码。

Answer 2

在我的脑海中，您可以创建一个包含您需要的所有验证规则的函数，例如：

function validatePass()
{
    var error = false;
    var oldPass = document.getElementById("oldPass").value;
    var newPass = document.getElementById("newPass").value;
    if(oldPass != newPass) {
        error = true;
    }
    if(error) {
        document.getElementById("someCellId").innerText = 'Not Met';
    } else {
        document.getElementById("someCellId").innerText = 'Met';
    }
    //set error to false for the next rule
    error = false;
    //more rules
    //possibly using
    //regular expressions
    //and referencing appropriate
    //not met and met table cells
}

将其附加到所有三个文本框的keydown事件，例如：

<input type="password" id="oldpass" name="oldpass" tabindex="1" onkeydown="javascript:validatePass()" />

这应该是一个开始。

Answer 3

这取决于验证逻辑所在的位置（正如您所说，这是一项要求）。如果你有一个服务器端（asp.net/php/asp/coldfusion等）代码块（非ajax启用，那么你会在用户的“回发”中执行此操作。如果你想在java脚本中这样做然后你必须a）通过javascript执行文本验证或使用javascript Ajax调用通过服务器端获取验证。

然后，你可以使用像jQuery + CSS这样的库来继续改变颜色等......

我相信asp.net有验证控件可以为你做这件事。 Ajax也是如此。

Answer 4

我看到的第一个问题是：

与旧密码不同

你发送旧密码+盐的哈希值并进行比较吗？如果是这样你也必须送你的盐。

我的建议是在服务器端执行此操作。您可以在javascript中执行的其他要求，但您也希望在服务器端具有相同的要求。因此，为了保持一致性，最好在服务器端保留所有验证。

如果你真的不想加载另一个页面，你可以通过ajax提交，但是在javascript中进行所有验证可能不是最好的计划

Answer 5

enter code here您需要使用事件。首先，您需要将事件附加到文本框，如此，

    /* *this* passes a reference of the text box to the validateBox function */
<input type="password" id="oldpass" name="oldpass" tabindex="1" onkeydown="validateBox(this)"/>

我使用了 onkeydown ，以便在用户输入文本框中的值时进行验证。（对于其他类型的事件，请参阅link text）

现在您需要为 validateBox 函数编写业务逻辑。在内部部分写这样的，总是一个好习惯，

<head>
 ....

<script>

function validateBox(currentTextBox) {
/* this passed from the */

    if(currentTextBox.id == "blah") { 
// to perform validation according to the referenced textbox
    if(currentTextBox.value == "blah") {


        alert(" met ");

    // in practice you would need to create a initially hidden div 
//element & populate the content of the div accordingly. & then unhide it.
    }

    }

}
</script>
</head>

我强烈建议使用像jQuery等javascript库/框架。它们让你的生活变得轻松而且更有成效！

如何根据用户输入动态更改某些文本的样式？

5 个答案: