表单验证不通过弹出提示窗口

快乐打工仔 分类:实例代码

分享一段代码实例,它实现了如果文本框输入不是数字,就会弹出一个提示窗口的效果。

貌似这里考察更多的是对于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>

表单验证不通过弹出提示窗口,这样的场景在实际项目中还是用的比较多的,关于表单验证不通过弹出提示窗口就介绍到这了。

表单验证不通过弹出提示窗口属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容