<form action="" name="" id="form1">
<div class="changepwd"><ul><li><input type="text" class="text_100per" value=""><p>请填写用户名，会员名不能为空</p><span>昵称</span></li><li><input type="text" class="text_100per" value=""><p>请填写邮箱，不能为空</p><span>邮箱</span></li><li><input type="text" class="text_100per" value=""><p>请填写密码，不能为空</p><span>密码</span></li><li><input type="text" class="text_100per" value=""><p>请再次填写密码，不能为空</p><span>确认密码</span></li><li><input type="text" class="text_100per" value=""><p></p><span>确认新密码</span></li><li class="validtext"><input type="text" class="text_40per" value="验证码" onBlur="if(this.value==''){this.value='验证码'}" onFocus="if(this.value=='验证码'){this.value=''}"> <img src="valid.jpg"><div class="clear"></div></li><li class="maksure"><input type="image" class="imp" src="data:images/changepwd.jpg" alt="确定修改" title="确定修改"></li></ul>
</div>
</form>

.changepwd {width:94%;margin:12px auto 12px;}
.changepwd ul {}
.changepwd ul li {height:auto;position:relative;padding-bottom:5px;}
.changepwd ul li p {font:12px/20px Helvetica;color:#999;}
.changepwd ul li span {display:block;position:absolute;left:0;top:0;z-index:-1;color:#333;padding:0 3%;width:94%;font:14px/34px Helvetica;color:#333;}
.maksure {padding-top:12px;}
.maksure .imp {display:block;width:100%;}

View Code

(function($){$.fn.beauForm = function(){var beau = function(arg){var argOli = arg.find('li');argOli.each(function(index,element){var _this = $(this);var oInp = $(this).find('input') || $(this).find('textarea');var oTex = $(this).find('textarea');oInp.focus(function(e) {if(oInp.val() == '' || oTex.text() == ''){_this.find('span').css({'color':'#aaa'});_this.find('p').css({'color':'#f00'});_this.find('input').css({'border':'solid 1px #f00'});}else{_this.find('span').text('');_this.find('p').css({'color':'#999'});_this.find('input').css({'border':'solid 1px #ccc'});}});$(document).keyup(function(e) {if(oInp.val() != ''){_this.find('span').text('');_this.find('p').css({'color':'#999'});_this.find('input').css({'border':'solid 1px #ccc'});}else{_this.find('span').text('');_this.find('p').css({'color':'#999'});_this.find('input').css({'border':'solid 1px #ccc'});}});oInp.blur(function(e) {if(oInp.val() == '' || oTex.text() == ''){_this.find('span').css({'color':'#333'});_this.find('span').text(tex);_this.find('p').css({'color':'#f00'});_this.find('input').css({'border':'solid 1px #f00'});}else{_this.find('span').text('');_this.find('p').css({'color':'#999'});_this.find('input').css({'border':'solid 1px #ccc'});}});    });var Inp = 'mc';};return $(this).each(function(index, element) {beau($(this));});    };
})(jQuery);    

<script src="js/beauForm.js"></script>
<script>$('#form1').beauForm();</script>