注册表单验证的模块

来源：互联网发布：直播看电视的软件编辑：程序博客网时间：2024/05/17 16:02

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery.1.12.4.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("√");
$("#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 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>

阅读全文

1 0