<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<title>jquery表单批量验证</title>
<script src="xjs/jquery-1.8.3.min.js"></script>
<style>
ul{width:100%;float: left; margin:10px 0;padding: 0px; list-style: none;}
li{float: left;}
.red{color:red;}
.selectshake{ border:1px solid #d00; background:#ffe9e8; color:#d00;}
</style>
</head>
<body>
<form name="form1" id="form1" method="post">
<div>
<ul>
<li>姓名：</li>
<li>
<input name="name" id="name" class="requird" type="text" /><span class="red">*</span>
</li>
</ul>
<ul>
<li>电话：</li>
<li>
<input name="phone" id="phone" value="" type="text" />
</li>
</ul>
<ul>
<li>微信：</li>
<li>
<input name="weixin" id="weixin" class="requird" value="" type="text" /><span class="red">*</span>
</li>
</ul>
<ul>
<li>邮箱：</li>
<li>
<input name="mail" id="mail" class="requird" value="" type="text" /><span class="red">*</span>
</li>
</ul>
<ul>
<li>地址：</li>
<li>
<input name="address" id="address" class="general" value="" type="text" />
</li>
</ul>
<ul>
<li><input type="submit" id="okbtn" name="okbtn" value="提交" /></li>
</ul>
</div>
</form>
<script>
$("#okbtn").click(function(){
var requird=true;
$(".requird").each(function() {
var val=$.trim($(this).val());
if (val==''){
$(this).focus();
shake($(this),"selectshake",4);
requird=false;
return false;
}
});
if (requird===true){
alert("全部验证通过");
//全部验证通过，执行程序
}else{
return false;
}
});
function shake(ele,cls,times){//边框闪烁
var i = 0,t= false ,o =ele.attr("class")+" ",c ="",times=times||2;
if(t) return;
t= setInterval(function(){
i++;
c = i%2 ? o+cls : o;
ele.attr("class",c);
if(i==2*times){
clearInterval(t);
ele.removeClass(cls);
}
},200);
};
</script>
</body>
</html>
10-25
509
509
10-12
1552
1552
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
