一个带提示的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.mb5u.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订阅特效代码搜索

表单按钮特效推荐

猜你也喜欢看这些