填写表单信息时的效果：
初始表单提交效果：
实现
css代码：
Code
.focus{
padding: 2px 0 2px 5px;
border: solid 1px #FF66CC;
}
.blur{
padding: 2px 0 2px 18px;
border: solid 1px red;
background: #ffff99 url(../imges/warn.png) no-repeat 2px center;
}
.success{
padding: 2px 0 2px 18px;
border: solid 1px green;
background: url(../imges/ok.png) no-repeat 2px center;
}
.show
{
z-index: auto;
display: none;
position:absolute;
width: 276px;
height: 35px;
overflow: hidden;
text-indent: 5px;
line-height: 40px;
font-size: 12px;
font-family: Arial;
background: url(../imges/over.gif) no-repeat left top;
opacity:0.9;
filter: alpha(opacity=90);
}
js代码：
Code
$(function(){
$('body').append('<div class="show"></div>');
$(document).mouseover(function(){$('.show').hide();});
$("input,textarea").each(function(){
var j = $(this);
var tip = j.attr('tip');
if(tip != undefined)
{
$("<span> "+tip+"</span>").css("color","#ccc").insertAfter(j);
if(j.is(":text,:password"))
{
j.focus(function(){
if(!j.hasClass("success")){
j.Focus();
$(".show").html(j.NullError()).css({left:j.offset().left,top:j.offset().top+20}).fadeIn();
if(j.val() == j.NullError())
j.val("");
}
}).blur(function(){
var Reg = new RegExp(j.attr("reg"));
if(Reg.test(j.val())){
j.Success();
}else{
j.Blur();
if(j.val().length==0 && j.is(":text")){
j.val(j.NullError());
}
}
});
}
}
});
$('form').submit(function(){
var isSubmit = true;
$(this).find('input').each(function(){
var thisReg = new RegExp($(this).attr('reg'));
if(!thisReg.test(this.value))
{
$(this).blur();
isSubmit = false;
}
});
return isSubmit;
} );
$.fn.extend({
Focus: function(){this.removeClass("blur").removeClass("success").addClass("focus");},
Blur: function(){this.removeClass("focus").removeClass("success").addClass("blur");},
Success: function(){this.removeClass("focus").removeClass("blur").addClass("success");},
NullError: function(){return this.attr("nullError")==undefined?"":this.attr("nullError");}
});
});
htm源代码：
Code
<input type="text" reg="\w{6,12}" tip="以字母开头，6~12字符,不能含特殊字符" nullError="请输入用户名" />
<input type="text" reg="\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" tip="邮箱必须有效" nullError="请输入邮箱" />
,
这个送给你！
posted on 2008-08-11 11:14
︷起↘嚸. 阅读(64)
评论(0) 编辑 收藏 网摘 所属分类:
Ajax JavaScript