关于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函数里根本就没有 pwd，为何参数要传他。
产生问题的原因和 name id 没有太大的关系。

首先，这些东西都写在了form表单里面，这里action填写的是指的是提交到当前页。

Q1 登录按钮式一个 submit ，点击登录按钮的时候，执行的是表单的 submit 事件，也就是直接提交表单数据了，不会执行 onclick事件，页面刷新。

Q2 点击button的时候，执行了 onclick事件，同时也执行了 表单的 submit事件，前者改变效果，后者提交自然刷新页面，也就是出现一闪而过的样子。

Q3 id 直接引用，有时候可以，不常用，或者不轻易用，而且浏览器不知道有没有兼容性，我测试的时可以用。对于这些怪异的现象，不用太理会，按照标准来。

Q4 name 一般式留给提交表单之后的后台程序引用的。

其次，尽量不要把 js 代码 写在 html 里面，分离结构 样式 行为。这种html里面的 onclick 写法尽量少用。

Answer 2

"placeholder"属性是h5中新定义的 你要考虑到你所用浏览器的兼容性

我在chrome中测试的效果如下：

Answer 3

id.value不对

var val = document.getElementById('id').getAttribute('value');

if( val==''){

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

}

else{

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

}

Q2:在form之前加个iframe，将form的action在何处打开指向这个iframe，就可以解决表单提交后刷新页面的情况。

<iframe name="frame" style="display:none;"></iframe> 

然后还要在form中添加一个target属性,属性值设置为iframe中的name属性值即可。

<form target="frame"  xxx=""  xxx="">

    ... 

</form>