关于js对象的问题

Question

function judge(id,pwd){

    if(id.value==null)

    {

        document.getElementById("tip").innerHTML="请输入账号";

    }

    else

    {

        document.getElementById("tip").innerHTML="请输入密码";

    }

}

以上是函数部分。

Q1:

<form action="" method="post" name="register">

    <input type="text" id="id" placeholder="请输入账号" class="form-control" style="margin-bottom: 5%;"> 

    <input type="password" id="pwd" placeholder="请输入密码" class="form-control" style="margin-top: 5%; margin-bottom: 3%;">

    <span class="tip" id="tip"></span>

    <input type="submit" value="登录" class="button" onsubmit="judge(document.getElementById('id'),document.getElementById('pwd'))">

</form>

为什么不能实现元素处出现"请输入账号"的效果？

Q2：

<form action="" method="post" name="register">

    <input type="text" id="id" placeholder="请输入账号" class="form-control" style="margin-bottom: 5%;"> 

    <input type="password" id="pwd" placeholder="请输入密码" class="form-control" style="margin-top: 5%; margin-bottom: 3%;">

    <span class="tip" id="tip"></span>

        <!--以下为修改代码-->

    <button class="button" onclick="judge(document.getElementById('id'),document.getElementById('pwd'))">登录</button>

</form>

这样能实现效果，但是页面会重新加载，效果一闪而过。为什么？如何调整？

Q3:

<form action="" method="post" name="register">

    <input type="text" id="id" placeholder="请输入账号" class="form-control" style="margin-bottom: 5%;"> 

    <input type="password" id="pwd" placeholder="请输入密码" class="form-control" style="margin-top: 5%; margin-bottom: 3%;">

    <span class="tip" id="tip"></span>

        <!--以下为修改代码-->

    <button class="button" onclick="judge(id,pwd)">登录</button>

</form>

为什么效果同2？id名也能引用一个对象？

Q4:

<form action="" method="post" name="register">

        <!--将id改为name-->

    <input type="text" name="id" placeholder="请输入账号" class="form-control" style="margin-bottom: 5%;"> 

    <input type="password" name="pwd" placeholder="请输入密码" class="form-control" style="margin-top: 5%; margin-bottom: 3%;">

    <span class="tip" id="tip"></span>

    <button class="button" onclick="judge(id,pwd)">登录</button>

</form>

为什么效果同上？难道name也能引用一个对象？

Answer 1

很好奇，你的judge函数里根本就没有&nbsp;pwd，为何参数要传他。产生问题的原因和&nbsp;name&nbsp;id&nbsp;没有太大的关系。首先，这些东西都写在了form表单里面，这里action填写的是指的是提交到当前页。Q1 登录按钮式一个&nbsp;submit&nbsp;，点击登录按钮的时候，执行的是表单的&nbsp;submit&nbsp;事件，也就是直接提交表单数据了，不会执行&nbsp;onclick事件，页面刷新。Q2 点击button的时候，执行了&nbsp;onclick事件，同时也执行了 表单的&nbsp;submit事件，前者改变效果，后者提交自然刷新页面，也就是出现一闪而过的样子。Q3&nbsp;id&nbsp;直接引用，有时候可以，不常用，或者不轻易用，而且浏览器不知道有没有兼容性，我测试的时可以用。对于这些怪异的现象，不用太理会，按照标准来。Q4&nbsp;name&nbsp;一般式留给提交表单之后的后台程序引用的。其次，尽量不要把&nbsp;js&nbsp;代码 写在&nbsp;html&nbsp;里面，分离结构 样式 行为。这种html里面的 onclick 写法尽量少用。

Answer 2

"placeholder"属性是h5中新定义的 你要考虑到你所用浏览器的兼容性我在chrome中测试的效果如下：

Answer 3

id.value不对var val = document.getElementById('id').getAttribute('value');if( val==''){&nbsp; &nbsp; document.getElementById("tip").innerHTML="请输入账号";}else{&nbsp; &nbsp; document.getElementById("tip").innerHTML="请输入密码";}Q2:在form之前加个iframe，将form的action在何处打开指向这个iframe，就可以解决表单提交后刷新页面的情况。<iframe name="frame" style="display:none;"></iframe>&nbsp;然后还要在form中添加一个target属性,属性值设置为iframe中的name属性值即可。<form target="frame"&nbsp; xxx=""&nbsp; xxx="">&nbsp; &nbsp; ...&nbsp;</form>