JS表单验证错误信息放在层内，填入错误的信息后错误信息显示在文本框内，用层的隐藏和显示实现
<body>
<form name="form1" method="post" action="" onsubmit="checkFrom();" style="position:absolute;">
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="7%" height="29">
姓名：
</td>
<td width="29%">
<input type="text" name="Name" id="namecn">
</td>
<td width="64%">验证要求：不能为空，只能是中文；</td>
</tr>
<tr>
<td height="33">身份证号：</td>
<td><input data type="idCard" name="Card" id="snnumber" msg="身份证号错误"></td>
<td>验证要求：匹配身份证号的位数；</td>
</tr>
<tr><td height="35">金额：</td>
<td><input type="text" name="amout" id="amout"></td>
<td>验证要求：只能是数字，允许有一个小数点，小数点后保留2位；</td></tr><tr><td> </td>
<td>
</td><td><input type="submit" name="button" id="button" value="提交" onclick="show()"></td></tr></table></form>
<div id="div2" style="display:none;position:relative;left:74px;top=150px;height=50px;width=50px;color:red;" onMouseout="hidden();">
<strong>姓名不能为空</strong></div>
<div id="div1" style="display:none;position:relative;left:74px;top=150px;height=50px;width=50px;color:red;" onMouseout="hidden();">
<strong>请输入正确的中文姓名</strong></div>
<div id ="div3" style="display:none;position:relative;left:74px;top=200px;height=50px;width=50px;color:red;" onMouseout="hidden();">
<strong>身份证位数不对</strong></div>
</body>
这是JS 代码：
function checkFrom() {
try {
var reg = /[^\u4e00-\u9fa5]+$/;
var name = document.getElementById('namecn');
if (name.value.length > 0) {
if (reg.test(name.value)) {
show();
return false;
}
} else {
show ();
return false;
}
var snnumber = document.getElementById('snnumber');
if (snnumber.value.length != 18 && snnumber.value.length != 15) {
show();
return false
}
var amout = document.getElementById('amout');
reg = /^(-?\d+)(\.\d{1,2})?$/
if (!reg.test(amout.value)) {
show ();
return false
}
return true
} catch (e) {
alert(e);
return false
}
}
function show()
{
document.getElementById("div1").style.display="";
document.getElementById("div2").style.display="";
document.getElementById("div3").style.display="";
}
function hidden(){
document.getElementById("div1").style.display="none";
document.getElementById("div3").style.display="none";
document.getElementById("div2").style.display="none";
} 展开
你好，帮你改好了，下面是改的部分
js方面
show函数的规范（小问题无关紧要）
把 display=""; 改成 display="block";
2. hidden 特大错误，新手必犯，hidden为保留方法，同reset不可以自己再定义，可改为hidden2
html方面
对form表单的type="submit"提交不了解，它不是简单的 button，点了它就提交触发
onSubmit="return checkFrom();" 提交的新页面，如果不加return 那么无论是否正确，都会提交，就相当于页面被刷新了，什么都看不到。
2.布局的问题，我先贴出我改的代码，再说明你的错误。
<div id="div1" style="display:none;position:relative;left:74px;top:10px;height:30px;width:300px;color:red;" onclick="hidden2();">
<strong>姓名不能为空</strong></div>
<div id="div2" style="display:none;position:relative;left:74px;top:10px;height:30px;width:300px;color:red;" onMouseOver="hidden2();">
<strong>请输入正确的中文姓名</strong></div>
<div id ="div3" style="display:none;position:relative;left:74px;top:20px;height:30px;width:300px;color:red;" onMouseout="hidden2();">
<strong>身份证位数不对</strong></div>
说明：其中 onclick，onMouseOver，onMouseout自己选一种就可以了，我每个都写的不一样。
要想明白为什么我这样写出现的位置是合适的，需要对相对定位有一定了解，既然你用了position:relative 说明你还是有所了解的。
你的错误：style里面不能写成 ‘=’号 要写成 ‘:'号，要不然对应属性无效 （其实这个错误我也是找了很久才给你找出来的，所以没资格怪你）
为什么我把属性的改成冒号（：）了，定位还是没用呢，只有left有用，top还是没用，而且点击了按钮还是一闪而过。抱歉哈，我刚学，不是特别明白这个，我最后想要达到的是这种效果：
完整代码已上传，IE与chrome测试正常（不过由于兼容性问题，显示的位置不同，这方面的东西还需要多做，自己把握）。（我全部改成了onclick，不过没有吧show与hidden2单独分开，所以要显示或消失都是同时的，用户体验不好，你明白原理自己改吧，改的部分还是我上面说的那些，不知你仔细看了没有。）
（还有，实现同一种效果可以有不同的方法，或在内部用不同的代码，如用js精确找到定位的位置）
