简明现代魔法 -> JavaScript -> 表单实时验证

表单实时验证

2009-09-20

效果演示

提示:
用户名必须2个字符以上。
密码强度:
密码必须4个字符以上,推荐8个字符以上。
邮箱验证:
请输入您有效的邮箱地址。

CSS设计

<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(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(bg-span-hint-welldone.jpg) no-repeat top left;
	border-color:#749e5c;
	color:#000;
}
fieldset.kindagood span.hint {
	background:#ffffcc url(bg-span-hint-kindagood.jpg) no-repeat top left;
	border-color:#cc9933;
}


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

</style>

JavaScript设计

表单设计

<body>

<form
	action="#"
	name="basicform"
	id="basicform" >

<fieldset>
	<label for="username">Choose a Username:</label>
	<input
		type="text"
		id="username"
		onkeyup="checkUsernameForLength(this);" />
	<span class="hint">提示:<br />用户名必须2个字符以上。</span>
</fieldset>

<fieldset>
	<label for="password">Enter a password:</label>
	<input
		type="password"
		id="password"
		onkeyup="checkPassword(this);" />
	<span class="hint">密码强度:<br />密码必须4个字符以上,推荐8个字符以上。</span>
</fieldset>

<fieldset>
	<label for="email">Enter your email address:</label>
	<input
		type="text"
		id="email"
		onkeyup="checkEmail(this);" />
	<span class="hint">邮箱验证:<br />请输入您有效的邮箱地址。</span>
</fieldset>
</form>
</body>
随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们