【问题标题】:How to retain the values of a label after invoking a function调用函数后如何保留标签的值
【发布时间】:2014-08-13 12:11:48
【问题描述】:

我只是想知道为什么我在下面设置的标签文本不存在。如果用户输入有效的用户名和密码say(xxx & yyy),那么标签应该设置为Welcome xxx,否则设置为“Login Failed”。在这里,我看到标签设置了正确的文本,但在几分之一秒内页面刷新并且所有字段都设置为空并且标签文本被删除。如何克服这一点?我正在尝试使用 Firefox。

以下是我的html代码:

<html>
<body>
<form>
User Name: <input type="text" id="uname"/><br/><br/>
Password :  <input type="text" id="pwd"/><br/><br/>
<input type="submit" value="Login"onclick="validateLogin()"/><br/>
<label id="label1" /><br/>
<label id="label2" /><br/>
</form>
<script>
function validateLogin()
{
    var v1=document.getElementById("uname").value;
    var v2=document.getElementById("pwd").value;
    if(v1=="xxx" && v2=="yyy")
    {
        document.getElementById("label1").innerHTML="Welcome :"+v1;
    }
    else
    {
        alert("Invalid login");
        document.getElementById("label2").innerHTML="Login Failed!!!";
    }
}
</script>
</body>
</html>

【问题讨论】:

  • 我想这只是为了练习。登录验证客户端不是要走的路..
  • 是的,这仅用于练习目的。

标签: javascript html validation dom


【解决方案1】:

像这样更改标记

<input type="submit" value="Login"onclick="return validateLogin()"/> <!-- added return -->

Javascript

if (v1 == "xxx" && v2 == "yyy") {
    document.getElementById("label1").innerHTML = "Welcome :" + v1;
    return false; /* return */
} else {
    alert("Invalid login");
    document.getElementById("label2").innerHTML = "Login Failed!!!";
    return false; /* return */
}

Demo

注意:这将按预期工作,但是当条件为true 时,这些值需要在服务器端发布,因此在if 块中编写代码以在服务器上发布数据而不是打印它到标签,不要忘记在编写代码后从 if 中删除 return false

【讨论】:

  • 成功了。你能告诉我这里返回 false 的重要性吗?这只是为了练习目的,所以用Label设置值。
  • @Uday 当您调用具有返回值的函数时,您应该初始化/获取某个变量,return false 不会将您的请求发送到服务器。当您使用submit button 发布数据时!
  • 重申一下,如果我省略返回值,是否意味着它正在回发到服务器?并进入初始状态?所以我们返回false的原因,确保不要在这里发布到服务器。我是对的还是朝着不同的方向前进?
猜你喜欢
  • 1970-01-01
  • 2022-12-11
  • 1970-01-01
  • 1970-01-01
  • 2013-11-06
  • 1970-01-01
  • 1970-01-01
  • 2012-08-13
  • 1970-01-01
相关资源
最近更新 更多