模仿网易邮箱做了一个登录表单验证,不太好,请指教
上代码
<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="images/changepwd.jpg" alt="确定修改" title="确定修改"></li> </ul> </div> </form>
css
.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%;}
js
(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>
还行,赶时间做了一个,知道不太完美不过还得接着完善
哪位好心哥哥帮提提意见也成 ^_^