jquery表单验证

来源：互联网发布：p2p网络管理器编辑：程序博客网时间：2024/06/08 05:33

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dongjinjin20170911</title>
<style>
.p1{color:#F00; font-size:12px;}
.p2{text-align:center;}
button{ margin-left:200px;}
input{ background-color:#99CCFF;}
.error{color:#F00;}
.right{ color:#0F0;}
</style>
<script src="jquery-2.1.0.js"></script>
<script type="text/javascript">
//进行判断然后进行提交判断
$(document).ready(function() {
var flag1=flag2=flag3=flag4=false;
$("buton").click(function(){
//提交成功的时候
if(flag1&&flag2&&flag3&&flag4){
alert("提交成功");
return true;
}else{//提交失败的时候
alert("提交失败！！！")
return false;
}
});
//判断email
$("input:eq(0)").blur(function(){
var email=$(this).val();
//email地址输入有误
if(email.search("@")==-1){
$("span:eq(0)").html("×用户Email错误").addClass("error").show();
return true;
}else{//email地址输入正确得到时候
$("span:eq(0)").html("√用户可用").addClass("right").show();
return false;
}
});
//判断输入的用户名
$("input:eq(1)").blur(function(){
var name=$(this).val();
//用户名信息输入有误
if(name.length<4){
$("span:eq(1)").html("用户输入信息错误").show();
return true;
}else{//用户名信息输入正确
$("span:eq(1)").html("用户输入正确").show();
return false;
}
});
//第一次输入用户密码
$("input:eq(2)").blur(function(){
var pwd=$(this).val();
//判断用户密码是否符合条件
if(pwd.length<6){
$("span:eq(2)").html("用户密码不可用").show();
return true;
}else{//密码符合条件
$("span:eq(2)").html("用户密码可用").show();
return false;
}
});
//第二次输入用户密码
$("input:eq(3)").blur(function(){
//获取到两次密码
var pwd=$("#pwd").val();
var qpwd=$("#qpwd").val();
//当输入的密码和上次输入一样就是正确的
if(pwd==qpwd){
$("span:eq(3)").html("输入正确").show();
return true;
}else{//两次密码输入不同
$("span:eq(3)").html("两次密码输入有误").show();
return false;
}
});
});

</script>
</head>

<body>
<p class="p1">以下均为必填项</p>
<form method="post" action="#">
<table width="500" border="1" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#99CCFF"><p class="p2">请填写您的Email地址：</p></td>
<td><input type="text" /><span></span></td>
</tr>
<tr>
<td bgcolor="#99CCFF"><p class="p2">设置您在当当网的昵称：</p></td>
<td><input type="text" /><span></span></td>
</tr>
<tr>
<td bgcolor="#99CCFF"><p class="p2">设置密码：</p></td>
<td><input type="text" id="pwd"/><span></span></td>
</tr>
<tr>
<td bgcolor="#99CCFF"><p class="p2">再次输入您设置的密码：</p></td>
<td><input type="text" id="qpwd"/><span></span></td>
</tr>
</table>
<button>注册</button>
</form>
</body>
</html>

阅读全文

0 0