javascript - 关于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>

Answer 4

如果要兼容其他浏览器，就要用label了