jQuery会员注册表单验证代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery会员注册表单验证代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
<head>
<meta charset='utf-8'/>
<title>jQuery会员注册表单验证代码</title>
<link rel="stylesheet" type="text/css" href="index.css">
<script type="text/javascript" src='Myjs.js'></script>
<script type="text/javascript" src='index.js' ></script>
</head>
<body>
<form method='post' action='#'>
	<dl>
		<dd class='user_dd'>
			用&nbsp;户&nbsp;&nbsp;名 : <input type='text' name='user' value=''/>
			<span class='info user_put'>请输入6个字符的用户名，可由汉字数字字母下划线组成（空格自动忽略）。<p></p></span>
			<span class='info_error user_error'>请输入正确用户名!<p></p></span>
			<span class='ok user_ok'></span>
		</dd>
		<dd>
			密　　码 : <input type='password' name='pass' vlaue=''/>
			<span class ='info pass_put'>请输入6-18位密码，由数字字母下划线组成（不能出现空格）。<p></p></span>
			<span class='safe'>安全等级：<strong class='s s1'></strong> <strong class='s s2'></strong>
				<strong class='s s3'></strong> <strong class='word'></strong><p></p>
			</span>
			<span class='info_error pass_error'>请输入正确密码!<p></p></span>
			<span class='ok pass_ok'></span>
		</dd>
		<dd>
			确认密码 : <input type='password' name='confirm_pass' />
			<span class='info confirm_put'>请再次输入密码。<p></p></span>
			<span class='info_error confirm_error'>两次密码不一致！<p></p></span>
			<span class='ok confirm_ok'></span>
		</dd>
		<dd>
			电子邮箱 : <input type='text' name='email' />
			<span class='info email_put'>请输入您的电子邮箱。<p></p></span>
			<span class='info_error email_error'>请输入正确电子邮箱！<p></p></span>
			<span class='ok email_ok'></span>
			<ul class='auto_complete'>
				<li><span></span>@qq.com</li>
				<li><span></span>@163.com</li>
				<li><span></span>@126.com</li>
				<li class='last_li'><span></span>@yahoo.com</li>
			</ul>
		</dd>
		<dd >
			<input type='submit' name='smt' value='注册' />
		</dd>
	</dl>
</form>
</body>
</html>

JS代码(index.js):

$(function(){
	window.z = 0;
	//鐢ㄦ埛鍚嶉獙璇侊紱$('input').name('user').bind('focus',function(){
	$('.user_put').css('display','block').css('z-index',''+ window.z++);
	$('.user_error').css('display','none');
	$('.user_ok').css('display','none');
}
).bind('blur',function(){
	if( $(this).val() == '' ) $('.user_put').css('display','none');
	else{
	var str = $(this).val();
	str = str.replace(/\s/g,'');
	//杈撳叆绌烘牸鏃惰嚜鍔ㄥ拷鐣ワ紝\s琛ㄧず绌烘牸if( str.length < 6 ){
	$('.user_put').css('display','none');
	$('.user_error').css('display','block');
	$('.user_ok').css('display','none');
}
else{
	$('.user_ok').css('display','block');
	$('.user_put').css('display','none');
	$('.user_error').css('display','none');
}
}
}
).bind('keyup',function(){
	if( $(this).val().replace(/\s/g,'').length >= 6 ){
	$('.user_ok').css('display','block');
	$('.user_put').css('display','none');
	$('.user_error').css('display','none');
}
else{
	$('.user_put').css('display','block');
	$('.user_error').css('display','none');
	$('.user_ok').css('display','none');
}
}
);
	//瀵嗙爜楠岃瘉$('input').name('pass').bind('focus',function(){
	$('.pass_put').css('display','block').css('z-index',''+ window.z++);
	$('.pass_error').css('display','none');
	$('.pass_ok').css('display','none');
}
).bind('blur',function(){
	if( $(this).val() == '' ){
	$('.pass_put').css('display','none');
}
else if( ! (new RegExp(/^[a-zA-Z0-9_]{
	6,18}
$/)).test( $(this).val() ) ){
	$('.pass_put').css('display','none');
	$('.pass_error').css('display','block');
	$('.pass_ok').css('display','none');
}
else{
	$('.pass_put').css('display','none');
	$('.pass_error').css('display','none');
	$('.safe').css('display','none');
	$('.pass_ok').css('display','block');
}
}
).bind('keyup',function(){
	if( (new RegExp(/^[a-zA-Z0-9_]{
	6,18}
$/)).test( $(this).val() )){
	$('.pass_put').css('display','none');
	$('.safe').css('display','block');
	switch( safeTest($(this).val()) ){
	case 1:$('.s1').css('background','red');
	$('.s2').css('background','#ccc');
	$('.s3').css('background','#ccc');
	$('.word').text('浣?).css('color','red');
	break;
	case 2:$('.s1').css('background','orange');
	$('.s2').css('background','orange');
	$('.s3').css('background','#ccc');
	$('.word').text('涓?).css('color','orange');
	break;
	case 3:$('.s').css('background','green');
	$('.word').text('楂?).css('color','green');
	break;
}
}
else{
	$('.safe').css('display','none');
	$('.pass_put').css('display','block');
}
}
);
	function safeTest(str){
	var strlen = str.length;
	var codeCont = 0;
	if( /\d/.test(str) ) codeCont++;
	if( /[a-zA-Z]/g.test(str) ) codeCont++;
	if( /_/g.test(str) ) codeCont++;
	if( strlen < 10 && codeCont == 1) return 1;
	else if( strlen < 10 && codeCont == 2 ) return 2;
	else return 3;
}
//纭瀵嗙爜楠岃瘉$('input').name('confirm_pass').bind('focus',function(){
	$('.confirm_put').css('display','block');
	$('.confirm_error').css('display','none');
	$('.confirm_ok').css('display','none');
}
).bind('blur',function(){
	$('.confirm_put').css('display','none');
	if( $(this).val() == '' )$('.confirm_error').css('display','none');
	else{
	if( $(this).val() != $('input').name('pass').val() ){
	$('.confirm_error').css('display','block');
}
else{
	$('.confirm_error').css('display','none');
	$('.confirm_ok').css('display','block');
}
}
}
);
	//鐢靛瓙閭楠岃瘉$('input').name('email').bind('focus',function(){
	$('.email_put').css('display','block');
	$('.email_error').css('display','none');
	$('.email_ok').css('display','none');
}
).bind('blur',function(){
	window.ulIfClick = false;
	if( $(this).val() == '' ){
	$('.email_put').css('display','none');
	$('.email_error').css('display','none');
	$('.email_ok').css('display','none');
	$('.auto_complete').css('display','none');
}
else{
	if( /^\w+@[a-zA-Z0-9]+(\.[a-z]{
	2,3}
){
	1,2}
$/.test($(this).val()) ){
	$('.email_put').css('display','none');
	$('.email_error').css('display','none');
	$('.email_ok').css('display','block');
}
else{
	$('.auto_complete li').bind('click',function(){
	$('input').name('email').val( $(this).text() );
	if( /^\w+@[a-zA-Z0-9]+(\.[a-z]{
	2,3}
){
	1,2}
$/.test($('input').name('email').val()) ){
	$('.email_put').css('display','none');
	$('.email_error').css('display','none');
	$('.email_ok').css('display','block');
}
$('.auto_complete').css('display','none');
	window.ulIfClick = true;
}
);
	setTimeout(function(){
	if( !window.ulIfClick ){
	$('.auto_complete').css('display','none');
	$('.email_put').css('display','none');
	$('.email_error').css('display','block');
	$('.email_ok').css('display','none');
}
else{
}
}
,200);
}
}
}
).bind('keyup',function(e){
	if( window.nextLi == undefined ) window.nextLi = 0;
	if( !$(this).val().match(/@/) ){
	if( $(this).val() == '' )$('.auto_complete').css('display','none');
	else{
	$('.auto_complete').css('display','block');
	if( e.keyCode != 13 ){
	$('.auto_complete li').css('background','#eee');
}
}
var str = $(this).val();
	$('.auto_complete span').text(str);
}
else{
	$('.auto_complete').css('display','none');
}
if(e.keyCode == 40 && $('.auto_complete').css('display') == 'block'){
	$('.auto_complete li').eq(window.nextLi++%4).css('background','#ff8').siblings().css('background','#eee');
}
if(e.keyCode == 13){
	window.nextLi = undefined;
	for(var i = 0;
	i < $('.auto_complete li').length();
	i++){
	//alert( $('.auto_complete li').eq(i).css('backgroundColor') );
	if($('.auto_complete li').eq(i).css('backgroundColor') == 'rgb(255,255,136)'){
	$('input').name('email').val( $('.auto_complete li').eq(i).text() );
	$('.auto_complete').css('display','none');
	if( /^\w+@[a-zA-Z0-9]+(\.[a-z]{
	2,3}
){
	1,2}
$/.test($(this).val()) ){
	$('.email_put').css('display','none');
	$('.email_error').css('display','none');
	$('.email_ok').css('display','block');
}
}
}
}
}
);
	$('form').eq(0).bind('submit',function(e){
	e.preventDefault();
}
);
}
);

JS代码(Myjs.js):

function Myjs(args){
	this.elements = [];
	if(typeof args == 'string'){
	if(args.indexOf(' ') != -1){
	var selectList = args.split(' ');
	var nodeList = [];
	var parentList = [];
	for(var i = 0;
	i < selectList.length;
	i++){
	if(parentList == '') parentList.push(document);
	switch(selectList[i].charAt(0)){
	case '#':nodeList = [];
	nodeList.push(this.getId(selectList[i].substring(1)));
	parentList = nodeList;
	break;
	case '.':nodeList =[];
	for(var j = 0;
	j < parentList.length;
	j++){
	var classEle = this.getClass(selectList[i].substring(1),parentList[j]);
	for(var k = 0;
	k < classEle.length;
	k++) nodeList.push(classEle[k]);
}
parentList = nodeList;
	break;
	default:nodeList = [];
	for(var j = 0;
	j < parentList.length;
	j++){
	var tagEle = this.getTag(selectList[i],parentList[j]);
	for(var k = 0;
	k < tagEle.length;
	k++) nodeList.push(tagEle[k]);
}
parentList = nodeList;
	break;
}
}
this.elements = parentList;
}
else{
	//findswitch(args.charAt(0)){
	case '#':this.elements[0] = this.getId(args.substring(1));
	break;
	case '.':var classList = this.getClass(args.substring(1));
	for(var i = 0;
	i < classList.length;
	i++){
	this.elements.push(classList[i]);
}
break;
	default:var tagList = this.getTag(args);
	for(var i = 0;
	i < tagList.length;
	i++){
	this.elements.push(tagList[i]);
}
break;
}
}
}
else if(typeof args == 'object'){
	if ( args != undefined ) this.elements.push(args);
}
else if(typeof args == 'function'){
	addDomLoaded(args);
}
}
//鍦ㄥ垱寤轰竴涓狹yjs瀵硅薄鍚屾椂鍒涘缓涓€涓猠lements鏁扮粍function $(args){
	var myjs = new Myjs(args);
	return myjs;
}
//鏌ユ壘瀛愬厓绱?Myjs.prototype.find = function(str){
	var childList = [];
	for(var i = 0;
	i < this.elements.length;
	i++){
	switch(str.charAt(0)){
	case '#':childList.push(document.getElementById(str.substring(1)));
	break;
	case '.':childList = this.getClass( str.substring(1),this.elements[i]);
	break;
	default:childList = this.getTag(str,this.elements[i]);
	break;
}
}
this.elements = childList;
	return this;
}
//鑾峰彇idMyjs.prototype.getId = function(id){
	return document.getElementById(id);
}
//鑾峰彇鏍囩Myjs.prototype.getTag = function(tag,parentNode){
	if( arguments.length == 1 ) parentNode = document;
	return parentNode.getElementsByTagName(tag);
}
//鑾峰彇nameMyjs.prototype.getName = function(name){
	this.elements = document.getElementsByName(name);
	return this;
}
//鑾峰彇classMyjs.prototype.getClass = function(classCon,parentNode){
	if( arguments.length == 1){
	parentNode = document;
}
var all_element = parentNode.getElementsByTagName('*');
	var classList = []for ( var i =0;
	i < all_element.length;
	i++ ){
	if ((new RegExp( '(\\s|^)' + classCon + '(\\s|$)' )).test(all_element[i].className)){
	classList.push(all_element[i]);
}
}
return classList;
}
//娣诲姞classMyjs.prototype.addClass = function(classCon){
	for( var i = 0;
	i < this.elements.length;
	i++ ){
	if( this.elements[i].className == '' ){
	this.elements[i].className = classCon;
}
else if ( !this.elements[i].className.match(new RegExp( '(\\s|^)' + classCon + '(\\s|$)' )) ){
	this.elements[i].className += ' ' + classCon;
}
}
return this;
}
//鍒犻櫎classMyjs.prototype.removeClass = function(classCon){
	for( var i = 0;
	i < this.elements.length;
	i++ ){
	if ( this.elements[i].className.match(new RegExp( '(\\s|^)' + classCon + '(\\s|$)' )) ){
	this.elements[i].className = this.elements[i].className.replace(new RegExp( '(\\s|^)' + classCon + '(\\s|$)' ),' ');
}
}
return this;
}
//鍒ゆ柇classMyjs.prototype.hasClass = function(classCon){
	for( var i = 0;
	i < this.elements.length;
	i++ ){
	if ( this.elements[i].className.match(new RegExp( '(\\s|^)' + classCon + '(\\s|$)' )) ){
	return true;
}
}
return false;
}
//css鏂规硶Myjs.prototype.css = function(attr,value){
	for(var i = 0;
	i < this.elements.length;
	i++){
	if( arguments.length == 1 ){
	if( typeof window.getComputedStyle != 'undefined' ){
	//W3Creturn window.getComputedStyle(this.elements[i],null)[attr];
}
else if ( typeof this.elements[i].currentStyle != 'undefined' ){
	//IEreturn this.elements[i].currentStyle[attr];
}
}
this.elements[i].style[attr] = value;
}
return this;
}
//html鏂规硶Myjs.prototype.html = function(str){
	for(var i = 0;
	i < this.elements.length;
	i++){
	if( arguments.length == 0 ){
	return this.elements[i].innerHTML;
}
this.elements[i].innerHTML = str;
}
return this;
}
//杩斿洖闀垮害Myjs.prototype.length = function(){
	return this.elements.length;
}
Myjs.prototype.name = function(str){
	var name = [];
	for(var i = 0;
	i < this.elements.length;
	i++){
	if(this.elements[i].name == str) name.push(this.elements[i]);
}
this.elements = name;
	return this;
}
//text 鏂规硶Myjs.prototype.text = function(str){
	for(var i = 0;
	i < this.elements.length;
	i++){
	if( arguments.length == 0 ){
	return typeof(this.elements[i].textContent) == 'string' ? this.elements[i].textContent:this.elements[i].innerText;
}
typeof(this.elements[i].textContent) == 'string' ? this.elements[i].textContent = str:this.elements[i].innerText = str;
}
return this;
}
//琛ㄥ崟鍏冪礌鐨剉al鏂规硶Myjs.prototype.val = function(str){
	for(var i = 0;
	i < this.elements.length;
	i++){
	if( arguments.length == 0 ){
	return this.elements[i].value;
}
this.elements[i].value = str;
}
return this;
}
//浜嬩欢缁戝畾Myjs.prototype.bind = function(event,fun){
	for(var i = 0;
	i < this.elements.length;
	i++){
	addEvent(this.elements[i],event,fun);
}
return this;
}
//鍗曞嚮浜嬩欢Myjs.prototype.click = function(fun){
	for(var i = 0;
	i < this.elements.length;
	i++){
	addEvent(this.elements[i],'click',fun);
}
return this;
}
//鑾峰彇涓嬫爣鍏冪礌Myjs.prototype.eq = function(num){
	var obj = new Myjs();
	obj.elements[0] = this.elements[num];
	return obj;
}
//鑾峰彇褰撳墠鍏冪礌涓嬩竴涓悓绾ц妭鐐?Myjs.prototype.next = function(){
	var nextList = [];
	for(var i = 0;
	i < this.elements.length;
	i++){
	var childList = getChild(this.elements[i].parentNode);
	for(var k = 0;
	k < childList.length;
	k++){
	if( this.elements[i] == childList[k] ){
	nextList.push(childList[k+1]);
}
}
}
this.elements = nextList;
	return this;
}
//鑾峰彇褰撳墠鍏冪礌涓婁竴涓悓绾ц妭鐐?Myjs.prototype.prev = function(){
	var prevList = [];
	for(var i = 0;
	i < this.elements.length;
	i++){
	var childList = getChild(this.elements[i].parentNode);
	for(var k = 0;
	k < childList.length;
	k++){
	if( this.elements[i] == childList[k] && k>0 )prevList.push(childList[k-1]);
}
}
this.elements = prevList;
	return this;
}
//鑾峰彇褰撳墠鑺傜偣鐨勬墍鏈夊厔寮?Myjs.prototype.siblings = function(){
	var siblingList = [];
	for(var i =0;
	i < this.elements.length;
	i++){
	var parent = this.elements[i].parentNode;
	var childrens = getChild(parent);
	for(var k =0;
	k < childrens.length;
	k++){
	if( this.elements[i] != childrens[k] )siblingList.push(childrens[k]);
}
}
this.elements = siblingList;
	return this;
}
//榧犳爣绉诲叆绉诲嚭浜嬩欢Myjs.prototype.hover = function(over,out){
	for(var i = 0;
	i < this.elements.length;
	i++){
	this.elements[i].onmouseover = over;
	this.elements[i].onmouseout = out;
}
return this;
}
//闅愯棌浜嬩欢Myjs.prototype.hide = function(){
	for(var i = 0;
	i < this.elements.length;
	i++){
	this.elements[i].style.display = 'none';
}
return this;
}
//鏄剧ず浜嬩欢Myjs.prototype.show = function(){
	for(var i = 0;
	i < this.elements.length;
	i++){
	this.elements[i].style.display = 'block';
}
return this;
}
Myjs.prototype.fadeIn = function(){
	for(var i = 0;
	i < this.elements.length;
	i++){
	var ele = this.elements[i];
	if( getStyle(ele,'visibility') == 'hidden' || getStyle(ele,'opacity') == 0){
	this.animate({
	'attr':'opacity','target':'100','method':'buffer'}
);
}
}
return this;
}
Myjs.prototype.fadeOut = function(){
	for(var i = 0;
	i < this.elements.length;
	i++){
	var ele = this.elements[i];
	if( getStyle(ele,'visibility') == 'visible' || getStyle(ele,'opacity') > 0 ){
	this.animate({
	'attr':"opacity",'target':'0','method':'buffer'}
);
}
}
return this;
}
Myjs.prototype.fadeTo = function(val){
	if(typeof val == 'number') val += '';
	for(var i = 0;
	i < this.elements.length;
	i++){
	var ele = this.elements[i];
	this.animate({
	'attr':"opacity",'target':val,'buffer_step':80,'method':'buffer'}
);
}
return this;
}
//鍗曞嚮浜嬩欢鐨勫垏鎹㈡柟娉?Myjs.prototype.toggle = function(){
	for(var i = 0;
	i < this.elements.length;
	i++){
	(function(element,argu){
	var cont = 0;
	addEvent(element,'click',function(){
	var num = cont++ % argu.length + 1;
	if ( num ) argu[--num].call(this);
}
);
}
)(this.elements[i],arguments);
}
return this;
}
//娴忚鍣ㄥ眳涓柟娉?Myjs.prototype.center = function(width,height){
	var screen_width = document.documentElement.clientWidth;
	var screen_height = document.documentElement.clientHeight;
	for(var i = 0;
	i < this.elements.length;
	i++){
	this.elements[i].style.top = (screen_height - height)/2 + 'px';
	this.elements[i].style.left = (screen_width - width)/2 +'px';
}
return this;
}
//娴忚鍣ㄥ昂瀵告敼鍙樹簨浠?Myjs.prototype.resize = function(fun){
	for(var i = 0;
	i < this.elements.length;
	i++){
	var elem = this.elements[i];
	window.onresize = function(){
	if( elem.offsetLeft > (window.innerWidth ? window.innerWidth:document.documentElement.clientWidth) - elem.offsetWidth ){
	elem.style.left = (window.innerWidth ? window.innerWidth:document.documentElement.clientWidth) - elem.offsetWidth+'px';
}
if( elem.offsetTop > (window.innerHeight ? window.innerHeight:document.documentElement.clientHeight) - elem.offsetHeight){
	elem.style.top = (window.innerHeight ? window.innerHeight:document.documentElement.clientHeight) - elem.offsetHeight + 'px';
}
}
;
}
return this;
}
//鐧诲綍閬僵Myjs.prototype.lock = function(){
	var width = window.innerWidth ? window.innerWidth + 'px':document.documentElement.clientWidth + 'px';
	var height = window.innerHeight ? window.innerHeight + 'px':document.documentElement.clientHeight + 'px';
	for(var i = 0;
	i < this.elements.length;
	i++){
	this.elements[i].style.height = height;
	this.elements[i].style.width = width;
	this.elements[i].style.display = 'block';
	//鍦ㄩ伄缃╂椂灞忓箷涓嶅彲鏀瑰彉澶у皬addEvent(window,'scroll',scroll );
}
return this;
}
function scroll(e){
	document.documentElement.scrollTop = 0;
	document.body.scrollTop = 0;
}
//鍙栨秷閬僵Myjs.prototype.unlock = function(){
	for(var i = 0;
	i < this.elements.length;
	i++){
	this.elements[i].style.display = 'none';
	removeEvent(this.elements[i],'scroll',scroll);
}
return this;
}
//鎷栨嫿鏂规硶Myjs.prototype.drag = function(){
	for(var i = 0;
	i < this.elements.length;
	i++){
	addEvent(this.elements[i],'mousedown',function(e){
	if( delspace( this.innerHTML ).length == 0 ) e.preventDefault();
	var e = e || window.event;
	var _this = this;
	var level = e.clientX - this.offsetLeft;
	var verticle = e.clientY - this.offsetTop;
	if(e.target.tagName == 'H2'){
	_this.style.cursor = 'move';
	addEvent(document,'mousemove',move);
	addEvent(document,'mouseup',up);
}
else{
	removeEvent(document,'mousemove',move);
	removeEvent(document,'mouseup',up);
}
;
	function up(e){
	removeEvent(document,'mousemove',move);
	removeEvent(document,'mouseup',up);
	_this.style.cursor = '';
	if( typeof _this.releaseCapture != 'undefined' ) _this.releaseCapture();
}
function move(e){
	var e = e|| window.event;
	var left = e.clientX - level;
	var top = e.clientY - verticle;
	var maxLeft = (window.innerWidth ? window.innerWidth:document.documentElement.clientWidth) - _this.offsetWidth;
	var maxTop = (window.innerHeight ? window.innerHeight:document.documentElement.clientHeight) - _this.offsetHeight;
	if( left <= 0 ){
	left = 0;
}
else if ( left >= maxLeft ){
	left = maxLeft;
}
if(top <= 0){
	top = 0;
}
else if ( top >= maxTop ){
	top = maxTop;
}
_this.style.left = left + 'px';
	_this.style.top = top + 'px';
	if(typeof _this.setCapture != 'undefined') _this.setCapture();
}
}
);
}
return this;
}
//鍔ㄧ敾Myjs.prototype.animate = function(obj,fun){
	for(var i = 0;
	i < this.elements.length;
	i++ ){
	var ele = this.elements[i];
	if(ele.timer != 'null') clearInterval(ele.timer);
	//娓呮鏈畬鎴愮殑瀹氭椂鍣?,闃叉鍗℃var attr = obj.attr == 'x' ? 'left':obj.attr == 'y' ? 'top':obj.attr != undefined ? obj.attr:'left';
	var ping = obj.ping != undefined ? obj.ping:10;
	//濡傛灉娌℃湁鍚屾鍔ㄧ敾锛屽垱寤哄悓姝ュ璞℃妸鍗曚釜鍔ㄧ敾鏀捐繘鍘?if(obj.syn == undefined && obj.attr != undefined){
	obj.syn ={
}
;
	obj.syn[obj.attr] = obj.target;
}
else if ( obj.syn == undefined && obj.attr == undefined ){
	throw('animate鏂规硶搴旂敤閿欒');
}
var arr = [];
	ele.cont = 0;
	for(var i in obj.syn){
	arr.push(i);
	//鑾峰彇瀵硅薄鐨勯敭鍊煎涓暟if(/^[\d]+$/.test(getStyle(ele,i) + '') ) ele.cont++;
	//鑾峰彇闀垮害鍨嬪睘鎬т釜鏁?}
//瀹氭椂鍣?ele.timer = setInterval(function(){
	var isFinish =[];
	// -- 鐢ㄦ潵鍒ゆ柇鍔ㄧ敾鏄惁鍏ㄩ儴瀹屾垚for(var i in obj.syn){
	var flag = false;
	attr = i == 'x' ? 'left':i == 'y'? 'top':i != undefined ? i:'left';
	obj.target = obj.syn[i];
	//濡傛灉鏄潪闀垮害灞炴€э紝鐩存帴璧嬪€?if( ! /^[\d]+/.test(getStyle(ele,attr) + '') ){
	ele.style[attr] = obj.target;
	if(ele.cont == 0 ){
	clearInterval(ele.timer);
	if(typeof fun != 'undefined')setTimeout(function(){
	fun();
}
,10);
}
}
else{
	//鑾峰彇鏁版嵁var now_style = getStyle(ele,attr);
	if( attr == 'opacity' && now_style <= 1 ) now_style *= 100;
	var new_style = obj.target.indexOf('px') != -1 ? parseInt( obj.target.substr(0,obj.target.length-2) ):parseInt(obj.target);
	var step = obj.step != undefined ? new_style > now_style ? obj.step:-obj.step:new_style > now_style ? 10:-10;
	var method = obj.method != undefined ? obj.method:'constant';
	//鍒ゆ柇鏄惁缂撳啿杩愬姩if( method == 'buffer' ){
	var buffer_step = obj.buffer_step != undefined ? new_style > now_style ? 100 - obj.buffer_step:-100 - obj.buffer_step:new_style > now_style ? 20:-20;
	var speed = Math.floor((new_style - getStyle(ele,attr))/buffer_step) != 0 ?Math.floor((new_style - getStyle(ele,attr))/buffer_step):Math.ceil((new_style - getStyle(ele,attr))/buffer_step);
	speed = step >= 0 ? speed:-speed;
}
else if(method == 'constant'){
	var speed = step}
//缁撴潫杩愬姩if( attr == 'opacity' ){
	//閫忔槑搴?if( step > 0 && getStyle(ele,attr) + speed >= new_style ){
	ele.style.opacity = new_style/100;
	ele.style.filter = 'alpha(opacity=' + new_style + ')';
}
else if( step < 0 && getStyle(ele,attr) + speed <= new_style ){
	ele.style.opacity = new_style/100;
	ele.style.filter = 'alpha(opacity=' + new_style + ')';
}
else{
	ele.style.opacity = (getStyle(ele,attr) + speed)/100;
	ele.style.filter = "alpha(opacity=" + (getStyle(ele,attr) + speed) + ")";
}
}
else{
	//闀垮害绫?if ( step > 0 && getStyle(ele,attr) + speed >= new_style ){
	ele.style[attr] = new_style + 'px';
}
else if(step < 0 && getStyle(ele,attr) + speed <= new_style ){
	ele.style[attr] = new_style + 'px';
}
else{
	ele.style[attr] = getStyle(ele,attr) + speed + 'px';
}
}
//姣忎竴娆or寰幆鍚庨兘鍒ゆ柇鏄惁瀹屾垚锛屾病鏈夊畬鎴愭暟缁勬坊鍔犱竴涓猣alseif( getStyle(ele,attr) != new_style ) isFinish.push(flag);
}
}
//for寰幆瀹屽悗锛屽鏋滄暟缁勯暱搴︿负0锛岄偅灏辨槸閮藉畬鎴愶紱if(isFinish.length == 0){
	clearInterval(ele.timer);
	if(fun != undefined) fun();
}
}
,ping);
}
return this;
}
;
	//---------------------------------------------------------------------------//鍔犺浇浜嬩欢addEvent.ID = 1;
	function addEvent(obj,type,fun){
	if( typeof obj.addEventListener != 'undefined' ){
	return obj.addEventListener(type,fun,false);
}
else{
	//鍒涘缓涓€涓瓨鏀惧璞＄殑鍝堝笇琛?if( !obj.events ) obj.events ={
}
;
	//绗竴娆℃墽琛屾椂if( !obj.events[type] ){
	//鍒涘缓涓€涓瓨鏀惧嚱鏁扮殑鏁扮粍obj.events[type] = [];
	//鎶婄涓€娆′簨浠跺瓨鏀惧湪鏁扮粍涓?if( obj['on' + type] ) obj.events[type][0].fun;
}
else{
	//鍚屼竴鍑芥暟蹇界暐锛?涓嶆坊鍔狅紱if ( addEvent.equal(obj.events[type],fun) ) return false;
}
//绗簩娆℃墽琛屼互鍚庯細obj.events[type][addEvent.ID++] = fun;
	//浜嬩欢澶勭悊obj['on'+type] = addEvent.exec;
}
}
//浜嬩欢澶勭悊鍑芥暟addEvent.exec = function(event){
	var e = event || addEvent.fixEvent(window.event);
	var es = this.events[e.type];
	for(var g in es) es[g].call(this,e);
}
//鍒ゆ柇浜嬩欢鏄惁宸茬粡瀛樺湪addEvent.equal = function(es,fun){
	for(var i in es){
	if(es[i] == fun) return true;
}
return false;
}
//绉婚櫎浜嬩欢function removeEvent(obj,type,fun){
	if( typeof obj.removeEventListener != 'undefined' ){
	return obj.removeEventListener(type,fun,false);
}
else{
	if( obj.event ){
	for( var i in obj.events[type] ){
	if( obj.events[type][i] == fun ) delete obj.events[type][i];
}
}
}
}
//鎶奍E涓殑event瀵硅薄閰嶅鍒癢3CaddEvent.fixEvent = function(event){
	event.preventDefault = addEvent.fixEvent.preventDefault;
	event.stopPropagation = addEvent.fixEvent.stopPropagation;
	event.target = event.srcElement;
	return event;
}
//ie闃绘榛樿浜嬪亣鍏煎w3caddEvent.fixEvent.preventDefault = function(){
	this.returnValue = false;
}
//ie闃绘鍐掓场浜嬩欢鍏煎w3caddEvent.fixEvent.stopPropagation = function(){
	this.cancelBubble = true;
}
//---------------------------------------------------------------------------//鍙栨秷绌烘牸function delspace(str){
	return str.replace(/(^\s*)(\s*$)/g,'');
}
//鍒涘缓xhr瀵硅薄function createXHR(){
	if( typeof (XMLHttpRequest) != 'undefined' ){
	return new XMLHttpRequest();
}
else if ( ActiveXObject != 'undefined'){
	var arr = ['MSXML2.DOMDocument6.0','MSXML2.DOMDocument3.0','MSXML2.DOMDocument',];
	for( var i = 0;
	i < arr.length;
	i++){
	try{
	return new ActiveXObject(arr[i]);
}
catch(e){
	//璺宠繃}
}
}
else{
	alert('鎮ㄧ殑娴忚鍣ㄦ垨绯荤粺涓嶆敮鎸乆HR锛?);
}
}
//鍚戦€夊畾鍏冪礌鐨勫悗闈㈡坊鍔犱竴涓厓绱?function insertAfter(newElement,selectedElement){
	var parent = selectedElement.parentNode;
	var lastElement = parent.lastChild;
	while( lastElement.nodeType != 1 ){
	lastElement = parent.lastChild.previousSibling;
}
if( selectedElement == lastElement ){
	parent.appendChild(newElement);
}
else{
	parent.insertBefore(newElement,selectedElement.nextSibling);
}
}
//鑾峰彇瀛愬厓绱犺妭鐐?涓嶆敼鍙樺厓绱?function getChild(element){
	var parent = element;
	var list = [];
	for(var i = 0;
	i < parent.childNodes.length;
	i++){
	if( parent.childNodes[i].nodeType == 1 ){
	list.push(parent.childNodes[i]);
}
}
return list;
}
//DOM鍔犺浇浜嬩欢锛?dom缁撴瀯鍔犺浇瀹屽悗灏辨墽琛岋紱function addDomLoaded(fun){
	if(typeof document.addEventListener != 'undefined'){
	//W3Cdocument.addEventListener('DOMContentLoaded',function(){
	fun();
	document.removeEventListener('DOMContentLoaded',arguments.callee);
}
,'false');
}
else{
	//IE678var timer = null;
	timer = setInterval(function(){
	try{
	document.documentElement.doScroll('left');
	fun();
}
catch(e){
}
}
,1);
}
}
//鑾峰彇澶栬仈鏍峰紡琛?function getStyle(ele,attr){
	if(attr == 'opacity' ){
	var attr_value = window.getComputedStyle ? window.getComputedStyle(ele,null).opacity:/[\d]{
	2,3}
/.exec(ele.currentStyle.filter)[0];
	return parseInt(attr_value) <= 1 ? parseFloat(attr_value).toFixed(2)*100:parseInt(attr_value);
}
else{
	var attr_value = window.getComputedStyle ? window.getComputedStyle(ele,null)[attr]:ele.currentStyle[attr];
	return attr_value.indexOf('px') != -1 ? parseInt(attr_value.substr(0,attr_value.length-2)):attr_value.indexOf('pt') != -1 ? parseInt(attr_value.substr(0,attr_value.length-2)):attr_value;
}
}
//灏嗗瓧绗︿覆杞寲涓篽tml/*function htmlStr(str){
	if( /</ )}
*/

CSS代码(index.css):

body,form,dd,ul,li{padding:0;margin:0;}
body{font-family:'寰蒋闆呴粦';}
form{width:600px;height:300px;margin:50px auto 0 auto;}
dd{width:560px;height:60px;position:relative;left:40px;}
.user_dd{margin-top:20px;}
input[type=submit]{display:block;margin-left:80px;width:120px;height:35px;color:white;font-size:24px;background:orange;border-radius:5px;}
input:hover{outline:none;}
input{width:160px;height:24px;border:1px solid #ccc;}
.info,.safe{display:none;margin-left:5px;width:247px;height:30px;background:url(img/info.gif) no-repeat;position:absolute;left:250px;top:0;color:#666;padding:10px 0 0 40px;}
.user_put{height:80px;line-height:26px;}
.pass_put{height:60px;line-height:26px;}
.info_error{display:none;width:247px;height:30px;margin-left:5px;background:url(img/info.gif) no-repeat 0 -190px;position:absolute;left:250px;top:0;color:red;padding:10px 0 0 40px;}
.info p,.safe p{width:282px;height:1px;background:#B9E3FF;position:absolute;left:5px;top:23px;}
.info_error p{width:282px;height:1px;background:#FFC7C7;position:absolute;left:5px;top:24px;}
.user_put p{top:73px;}
.pass_put p{top:53px;}
.safe .s{display:inline-block;width:12px;height:12px;border:1px solid #ccc;background:#ccc;}
.ok{display:none;width:20px;height:20px;background:url(img/ok.gif) no-repeat;position:absolute;left:260px;top:8px;}
.word{margin-left:5px;color:#000;}
.auto_complete{display:none;width:160px;height:120px;background:#eee;border:1px solid #ccc;list-style-type:none;position:absolute;left:78px;z-index:10;}
.auto_complete li{width:100%;height:30px;line-height:30px;border-bottom:1px solid #ff3;font-size:10px;cursor:pointer;}
.auto_complete li:hover{background:#ff8;}
.auto_complete .last_li{border-bottom:none;}

附件:下载该文件资源,减少时间成本(增值服务)