图集1/1

正文 2526字数 120,476阅读

<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>表单验证</title> <style> *{padding:0px;margin:0px;} #myformgz .input{ width: 100%; height: 100%; position: relative; } #myformgz .p{ margin: 12px; width: 300px; height: 20px; position: relative; } #myformgz .span{ display: inline-block; color: #fff; background: red; height:21px; line-height:21px; position: absolute; right: 0px; top: 0px; } textarea,input { /*宽度多出2px bug*/ -webkit-box-sizing: border-box; -moz-box-sizing : border-box; -ms-box-sizing : border-box; -o-box-sizing : border-box; box-sizing : border-box; } </style> </head> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script> <body> <form name="myformgz" id="myformgz" action="" method="POST" onsubmit="return mycheckgz();"> <p class="p"> <input type="text" name="user" id="user" class="input" /> </p> <p class="p"> <input type="text" name="tel" id="tel" class="input" /> </p> <p class="p"> <input type="text" name="address" id="address" class="input" /> </p> <br /> <input type="submit" value="Submit" /> </form> <script> function mycheckgz(){ var e1='#myformgz input'; var mycars=new Array('请填写用户名','请填写电话号码','请填写地址'); var er; var e=function(d){var d=e1;$(d).each(function(n){ var v=$(this).val(); if(!v){ er=false; $(this).after('<span class="span">'+mycars[n]+'</span>'); return false; } er=true; return true; });}(); //e(e1); if(!er) return false; } //JQ 同时绑定多个事件 $('#myformgz input').bind({ focus:function(){ $(this).next().remove(); }, keyup:function(){ $(this).next().remove(); }, mouseover:function(){ $(this).next().remove(); //$(this).focus(); }, mouseout:function(){ $(this).next().remove(); } }); </script> </body> </html>
Run code
Cut to clipboard