新的表单验证
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
*{
margin:0;
padding:0;
list-style:none;
}
.box{
width:600px;
height:300px;
margin:100px auto;
border:1px solid red;
}
#myformgz .p{
margin: 12px;
width: 300px;
height: 20px;
position: relative;
}
#myformgz .input{
width: 100%;
height: 100%;
padding:5px;
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>
<title>新的表单验证</title>
</head>
<body>
<div class="box">
<form name="myformgz" id="myformgz" action="" method="POST" onsubmit="return mycheckgz();">
<p class="p">
<input type="text" name="user" id="user" class="input" value="用户名" onfocus="if(this.value=='用户名') value='';" onblur="if(this.value=='') value='用户名';" />
</p>
<p class="p">
<input type="text" name="tel" id="tel" class="input" value="电话" onfocus="if(this.value=='电话') value='';" onblur="if(this.value=='') value='电话';" />
</p>
<p class="p">
<input type="text" name="address" id="address" class="input" value="地址" onfocus="if(this.value=='地址') value='';" onblur="if(this.value=='') value='地址';" />
</p>
<p class="p">
<input type="submit" value="Submit" />
</p>
</form>
</div>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
function mycheckgz(){
var e1='#myformgz input';
var mycars=new Array('请填写用户名','请填写电话号码','请填写地址');
var mycarsd=new Array('用户名','电话','地址');
var er;
var e=function(d){var d=e1;$(d).each(function(n){
var v=$(this).val();
if(!v || v==mycarsd[n]){
er=false;
$(this).focus();
$(this).after('<span class="span">'+mycars[n]+'</span>');
return false;
}
er=true;
return true;
});}();
//e(e1);
if(!er) return false;
//alert('表单提交成功');
}
//JQ 同时绑定多个事件
$('#myformgz input').bind({
focus:function(){
$(this).next().remove();
},
blur:function(){
$(this).next().remove();
},
keyup:function(){
$(this).next().remove();
},
mouseover:function(){
$(this).next().remove();
//$(this).focus();
},
mouseout:function(){
$(this).next().remove();
}
});
</script>