注册表单验证
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,
minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
<title></title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js" ></script>
<script>
$(function(){
var flag=false;
var flag2=false;
var flag3=false;
var flag4=false;
$("#email").blur(function(){
var email=$("#email").val();
var aa=email.match("@");
if(aa==null){
$("#span").text("输入的邮箱不合法");
$("#span").css({"color":"red"});
flag=false;
}else{
$("#span").text("img");
$("#span").css({"color":"green"});
flag=true;
}
});
$("#name").blur(function(){
var name=$("#name").val();
if(name.length<4){
$("#span2").text("请输入昵称");
$("#span2").css({"color":"red"});
flag2=false;
}else{
$("#span2").text("√");
$("#span2").css({"color":"green"});
flag2=true;
}
});
$("#pass").blur(function(){
var pass=$("#pass").val();
if(pass==""){
$("#span3").text("请输入密码");
$("#span3").css({"color":"red"});
flag3=false;
}else if(pass.length<6||pass.length>10){
$("#span3").text("请输入6-10密码");
$("#span3").css({"color":"red"});
flag3=false;
}else{
$("#span3").text("√");
$("#span3").css({"color":"green"});
flag3=true;
}
})
$("#pass2").blur(function(){
var pass=$("#pass").val();
var pass2=$("#pass2").val();
if(pass!=pass2){
$("#span4").text("两次密码不一致");
$("#span4").css({"color":"red"});
flag4=false;
}else{
$("#span4").text("√");
$("#span4").css({"color":"green"});
flag4=true;
}
})
$("form").submit(function(){
if(flag&&flag2&&flag3&&flag4){
alert("对");
return false;
}else{
alert("输入的信息错误");
return false;
}
});
});
</script>
<style>
.color{color: red;margin-left: 700px}
.w{background-color: aquamarine}
.k{width: 1000px}
.kk{width: 400px;background-color:#E8FBFF}
</style>
</head>
<body>
<h1 class="color">以下均为必填项</h1>
<form action="https://www.baidu.com/?tn=22073068_oem_dg" id="form">
<table width="700px" border="1px" align="center" cellpadding="10" cellspacing="0">
<tr>
<td class="kk">请填写您的Email地址:</td>
<td class="k"><input type="text" class="w" id="email"><span id="span">请填写有效的Email地址</span></td>
</tr>
<tr>
<td class="kk">设置您在当当网的昵称:</td>
<td class="k"><input type="text" class="w" id="name"><span id="span2">您的昵称可以由英文字母、中文、数字组成</span></td>
</tr>
<tr>
<td class="kk" align="right">设置密码:</td>
<td class="k"><input type="text" class="w" id="pass"><span id="span3">输入6-10位的密码</span></td>
</tr>
<tr>
<td class="kk" align="right">再次输入您设置的密码:</td>
<td class="k"><input type="text" class="w" id="pass2"><span id="span4"></span></td>
</tr>
</table>
<input type="submit" value="注册" style="margin-left: 1000px;margin-top: 30px">
</form>
</body>
</html>