js實(shí)現(xiàn)表單檢測及表單提示的方法

更新時間：2015年08月14日 15:03:33 作者：企鵝

這篇文章主要介紹了js實(shí)現(xiàn)表單檢測及表單提示的方法,涉及javascript表單元素提示效果的相關(guān)技巧,非常簡單實(shí)用,需要的朋友可以參考下

本文實(shí)例講述了js實(shí)現(xiàn)表單檢測及表單提示的方法。分享給大家供大家參考。具體如下：

這是個實(shí)用的表單判斷以及表單提示效果，如果點(diǎn)擊需要輸入文字的時候，提示就會跑出來，提示框的形狀比較個性化，有一個三角符號指向輸入框，有兩張圖片需要下載。

運(yùn)行效果如下圖所示：

在線演示地址如下：

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

具體代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>表單檢測及表單提示</title>
<style type="text/css">
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;
}
</style>
<script type="text/javascript">
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<inputs.length; i++){
  if (inputs[i].parentNode.getElementsByTagName("span")[0]) {
   inputs[i].onfocus = function () {
    this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
   }
   inputs[i].onblur = function () {
    this.parentNode.getElementsByTagName("span")[0].style.display = "none";
   }
  }
 }
 var selects = document.getElementsByTagName("select");
 for (var k=0; k<selects.length; k++){
  if (selects[k].parentNode.getElementsByTagName("span")[0]) {
   selects[k].onfocus = function () {
    this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
   }
   selects[k].onblur = function () {
    this.parentNode.getElementsByTagName("span")[0].style.display = "none";
   }
  }
 }
}
addLoadEvent(prepareInputsForHints);
</script>
</head>
<body>
<p style="font:normal 12px/15px Arial;">Tab or click through the fields to reveal the hints.</p>
<dl>
 <dt>
  <label for="firstname">First Name:</label>
 </dt>
 <dd>
  <input name="firstname" id="firstname" type="text" />
  <span class="hint">This is the name your mama called you when you were little.<span class="hint-pointer"> </span></span>
 </dd>
 <dt>
  <label for="lastname">Last Name:</label>
 </dt>
 <dd>
  <input name="lastname" id="lastname" type="text" />
  <span class="hint">This is the name your sergeant called you when you went through bootcamp.<span class="hint-pointer"> </span></span>
 </dd>
 <dt>
  <label for="email">Email:</label>
 </dt>
 <dd>
  <input name="email" id="email" type="text" />
  <span class="hint">The thing with the @ symbol and the dot com at the end.<span class="hint-pointer"> </span></span>
 </dd>
 <dt><label for="year">Birth Year:</label></dt>
 <dd>
  <select id="year" name="year">
   <option value="">YYYY</option>
   <option value="1066">1066</option>
   <option value="1492">1492</option>
   <option value="1776">1776</option>
  </select>
  <span class="hint">Pick a famous year to be born in.<span class="hint-pointer"> </span></span>
 </dd>
 <dt>
  <label for="username">Username:</label>
 </dt>
 <dd>
  <input name="username" id="username" type="text" />
  <span class="hint">Between 4-12 characters.<span class="hint-pointer"> </span></span>
 </dd>
 <dt>
  <label for="password">Password:</label>
 </dt>
 <dd>
  <input name="password" id="password" type="password" />
  <span class="hint">Between 5-13 characters, but not 7. Never 7.<span class="hint-pointer"> </span></span>
 </dd>
 <dt class="button"> </dt>
 <dd class="button">
  <input
   type="submit"
   class="button"
   value="Submit" />
 </dd>
</dl>
</body>
</html>

希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: