表单验证不通过弹出提示窗口
分类：实例代码
分享一段代码实例，它实现了如果文本框输入不是数字，就会弹出一个提示窗口的效果。
貌似这里考察更多的是对于dom元素的操作，而不是表单验证。
表单验证推荐使用jQuery Validate插件，具体可以参阅jQuery Validate教程板块。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
}
.show {
max-width: 200px;
height: 50px;
line-height: 50px;
background: red;
color: #FFFFFF;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
display: block;
text-align: center;
border-radius: 6px;
font-size: 16px;
}
.checki {
margin: 0 auto;
width: 500px;
padding-top: 20px;
text-align: center;
}
</style>
<script>
window.onload = function () {
var oBtn = document.getElementById('btn');
var oTet = document.getElementById('tet');
oBtn.onclick = function () {
var newDiv = document.createElement('div')
var timer;
newDiv.innerHTML = '请输入数字';
newDiv.className = 'show';
if (isNaN(oTet.value)) {
document.body.appendChild(newDiv)
function run() {
timer = setTimeout(function () {
newDiv.remove()
}, 1500)
};
run();
oTet.value = '';
};
var oDiv = document.getElementsByClassName('show')[0];
oDiv.onmouseover = function () {
clearTimeout(timer)
}
oDiv.onmouseout = function () {
run();
}
};
};
</script>
</head>
<body>
<div class="checki">
<input type="text" id="tet">
<button type="button" id="btn">提交</button>
</div>
</body>
</html>
表单验证不通过弹出提示窗口，这样的场景在实际项目中还是用的比较多的，关于表单验证不通过弹出提示窗口就介绍到这了。
表单验证不通过弹出提示窗口属于前端实例代码，有关更多实例代码大家可以查看。