js中的innerHTML到底怎么用？

[小小亠星辰]

刚学js不久，在验证输入中想用innerHTML，可是全靠偶然性 点好多次才会出来一次 而且还瞬间消失 求大神指点一二
代码如下：
<script type="text/javascript">
function fun(){
var name = document.getElementById("here");
if(document.form1.text.value==""){
//alert("输入为空了");
name.innerText="<font color='red'>请输入用户名</font>";
return false;
}else
alert("输入不为空");
}
</script>
<form name="form1" method="post">
输入<input type="text" id="text" name="text"><span id="here"></span><br>
<input type="submit" value="提交" onclick="fun()">
</form>
</body>

[天际的海浪]

<form name="form1" method="post" onsubmit="return fun()"> 输入<input type="text" id="text" name="text"><span id="here"></span><br> <input type="submit" value="提交" > </form>

[泡泡鱼_]

1：onclick="return fun()" 2：你用的是innerText。所以定义的font不生效，直接做为文本显示。要生效，要使用innerHTML “瞬间消失”是因为你触发事件的input类型是submit。绑定事件的用法又错了。所以，点下去的时候表单提交了。因为你的form没有设置action属性，表单就提交到当前页面。视觉效果上就相当于刷新了一次页面了

[小小亠星辰]

谢谢您，我的问题已经解决了
不过您说的我的事件绑定错了，能说的详细一点么

[泡泡鱼_]

引用 3 楼 qq_32015665 的回复:

谢谢您，我的问题已经解决了 不过您说的我的事件绑定错了，能说的详细一点么

首先：表单的验证事件，最好应该写在form的onsubmit中，这一点@jslang 的例子已经写明了。而且一定要加上return ，比如：onsubmit="return fun()" 这时候，表单的提交与否将取决于fun()的执行结果。如果返回的是false当前表单不会提交；如果返回的是true，则表单正常,继续提交。 你如果要定义在input type="submit"的按钮中，也要加上return。这时候的返回结果其实是要决定当前按钮的功能性是否要正常运行。返回是true时，submit就生效，表单提交。否则submit不生效，表单不提交；就是说它是控制按钮的事件从而达到控制表单是否提交。也能起到和form的onsubmit一样的功能。但是：还是建议写在form的onsubmit中