前端开发

本教程讲解javascript实现表单检测及表单提示的方法

本文实例讲述了js实现表单检测及表单提示的方法。分享给大家供大家参考。具体如下：

这是个实用的表单判断以及表单提示效果，如果点击需要输入文字的时候，提示就会跑出来，提示框的形状比较个性化，有一个三角符号指向输入框，有两张图片需要下载。

运行效果如下图所示：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-table-check-form-tips-codes/

具体代码如下：

dl {
font:normal 12px/15px Arial;
position: relative;
width: 350px;
}
dt {
 clear: both;
 float:left;
 width: 130px;
 padding: 4px 0 2px 0;
 text-align: left;
}
dd {
 float: left;
 width: 200px;
 margin: 0 0 8px 0;
 padding-left: 6px;
}
.hint {
 display: none;
 position: absolute;
 right: -250px;
 width: 200px;
 margin-top: -4px;
 border: 1px solid #c93;
 padding: 10px 12px;
 background: #ffc url("images/pointer.gif") no-repeat -10px 5px;
}
.hint .hint-pointer {
 position: absolute;
 left: -10px;
 top: 5px;
 width: 10px;
 height: 19px;
 background: url("images/pointer.gif") left top no-repeat;
}


function addLoadEvent(func) {
 var oldonload = window.onload;
 if (typeof window.onload != 'function') {
 window.onload = func;
 } else {
 window.onload = function() {
  oldonload();
  func();
 }
 }
}
function prepareInputsForHints() {
 var inputs = document.getElementsByTagName("input");
 for (var i=0; i


Tab or click through the fields to reveal the hints.


 

  First Name:
 
 

  
  This is the name your mama called you when you were little. 
 
 

  Last Name:
 
 

  
  This is the name your sergeant called you when you went through bootcamp. 
 
 

  Email:
 
 

  
  The thing with the @ symbol and the dot com at the end. 
 
 
Birth Year:
 

  
   YYYY
   1066
   1492
   1776
  
  Pick a famous year to be born in. 
 
 

  Username:
 
 

  
  Between 4-12 characters. 
 
 

  Password:
 
 

  
  Between 5-13 characters, but not 7. Never 7.