一個帶提示的Ajax驗證表單_表單按鈕特效

一個常用的Ajax表單驗證程序，適時提示你輸入的字符是否符合要求，簡潔明快，便于你修改，它是用JavaScript實現的，沒有摻雜其它的框架類代碼，因此比較實用。

<!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>
<meta http-equiv="mrc-type" mrc="text/html; charset=utf-8" />
<title>帶提示的Ajax驗證表單</title>
<style type="text/css">
form {
	width:500px;
	border:1px solid #ccc;
}
fieldset {
	border:0;
	padding:10px;
	margin:10px;
	position:relative;
}
label {
	display:block;
	font:normal 12px/17px verdana;
}
input {width:160px;}
span.hint {
	font:normal 11px/14px verdana;
	background:#eee url(/jscss/demoimg/200910/bg-span-hint-gray.gif) no-repeat top left;
	color:#444;
	border:1px solid #888;
	padding:5px 5px 5px 40px;
	width:250px;
	position:absolute;
	margin: -12px 0 0 14px;
	display:none;
}

fieldset.welldone span.hint {
	background:#9fd680 url(/jscss/demoimg/200910/bg-span-hint-welldone.jpg) no-repeat top left;
	border-color:#749e5c;
	color:#000;
}
fieldset.kindagood span.hint {
	background:#ffffcc url(/jscss/demoimg/200910/bg-span-hint-kindagood.jpg) no-repeat top left;
	border-color:#cc9933;
}

fieldset.welldone {
	background:transparent url(/jscss/demoimg/200910/bg-fieldset-welldone.gif) no-repeat 194px 19px;
}
fieldset.kindagood {
	background:transparent url(/jscss/demoimg/200910/bg-fieldset-kindagood.gif) no-repeat 194px 19px;
}

</style>

// http://www.wf0088.com
function prepareInputsForHints() {
  var inputs = document.getElementsByTagName("input");
  for (var i=0; i<inputs.length; i++){
    inputs[i].onfocus = function () {
      this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
    }
    inputs[i].onblur = function () {
      this.parentNode.getElementsByTagName("span")[0].style.display = "none";
    }
  }
}
addLoadEvent(prepareInputsForHints);
</script>
</head>
<body>
<form
	action="#"
	name="basicform"
	id="basicform" >
<fieldset>
	<label for="username">用戶名:</label>
	<input
		type="text"
		id="username"
		onkeyup="checkUsernameForLength(this);" />
	<span class="hint">用戶名最低6位哦</span>
</fieldset>

<fieldset>
	<label for="email">Email地址:</label>
	<input
		type="text"
		id="email"
		onkeyup="checkEmail(this);" />
	<span class="hint">You can enter your real address without worry - we don't spam!</span>
</fieldset>
</form>
</body>
</html>

所屬頻道：表單按鈕特效/更新時間：2012-12-03

[收藏][報錯][返回列表]

相關表單按鈕特效：

一個帶提示的Ajax驗證表單_表單按鈕特效

表單按鈕特效Rss訂閱特效代碼搜索

表單按鈕特效推薦

猜你也喜歡看這些