<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<body>
<form action="https://www.baidu.com" method="post" id="f1">
姓名<input type="text" id="name" />
<span id="sp1" style="color: red;"></span>
<br/> Email地址
<input type="email" id="ema" />
<span id="sp2" style="color: red;"></span>
<br/> 手机号
<input type="text" id="tell" />
<span id="sp3" style="color: red;"></span>
<br/> 身份证号
<input type="text" id="sfz" />
<span id="sp4" style="color: red;"></span>
<input type="button" id="tj" value="提交" />
</form>
</body>
<script type="text/javascript">
var flas1 = false;//标识符
//给id设置失焦
$("#name").blur(function() {
//取name值
var name = $("#name").val();
//判断是不是空或者长度小于3
if(name == "" || name == null || name.length < 3) {
$("#sp1").html("用户名不能为空且长度大于3")//给span标签赋值
flas1 = false;//标识符
} else {//正确的
$("#sp1").css({//css设置样式
"color": "green"
});
$("#sp1").html("√")//给span标签赋值
flas1 = true;//标识符
}
});
var flas2 = false;//标识符
$("#ema").blur(function() {
var ema = $("#ema").val();
if(ema.indexOf("@") != -1) {//indexOf包含 indexOf("@") != -1 不等于-1说明有
$("#sp2").html("√")//给span标签赋值
flas2 = true;//标识符
} else {
$("#sp2").css({//css设置样式
"color": "green"
});
$("#sp2").html("邮箱地址必须包含“@”")//给span标签赋值
flas2 = false;//标识符
}
});
var flas3 = false;//标识符
$("#tell").blur(function() {
var tell = $("#tell").val();
if(tell.length != 11) {
$("#sp3").html("手机号为11位数字")
flas3 = false;
} else {
$("#sp3").css({
"color": "green"
});
$("#sp3").html("√")
flas3 = true;
}
});
var flas4 = false;
$("#sfz").blur(function() {
var sfz = $("#sfz").val();
if(sfz.length != 18) {
$("#sp4").html("手机号为18位数字")
flas4 = false;
} else {
$("#sp4").css({
"color": "green"
});
$("#sp4").html("√")
flas4 = true;
}
});
$("#tj").click(function() {//获取tj的方法
if(flas1 && flas2 && flas3&& flas4) {//都是true
$("#f1").submit();//提交表单
} else {
alert("数据有误！");
return;
}
})
</script>
</html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<body>
<form action="https://www.baidu.com" method="post" id="f1">
姓名<input type="text" id="name" />
<span id="sp1" style="color: red;"></span>
<br/> Email地址
<input type="email" id="ema" />
<span id="sp2" style="color: red;"></span>
<br/> 手机号
<input type="text" id="tell" />
<span id="sp3" style="color: red;"></span>
<br/> 身份证号
<input type="text" id="sfz" />
<span id="sp4" style="color: red;"></span>
<input type="button" id="tj" value="提交" />
</form>
</body>
<script type="text/javascript">
var flas1 = false;//标识符
//给id设置失焦
$("#name").blur(function() {
//取name值
var name = $("#name").val();
//判断是不是空或者长度小于3
if(name == "" || name == null || name.length < 3) {
$("#sp1").html("用户名不能为空且长度大于3")//给span标签赋值
flas1 = false;//标识符
} else {//正确的
$("#sp1").css({//css设置样式
"color": "green"
});
$("#sp1").html("√")//给span标签赋值
flas1 = true;//标识符
}
});
var flas2 = false;//标识符
$("#ema").blur(function() {
var ema = $("#ema").val();
if(ema.indexOf("@") != -1) {//indexOf包含 indexOf("@") != -1 不等于-1说明有
$("#sp2").html("√")//给span标签赋值
flas2 = true;//标识符
} else {
$("#sp2").css({//css设置样式
"color": "green"
});
$("#sp2").html("邮箱地址必须包含“@”")//给span标签赋值
flas2 = false;//标识符
}
});
var flas3 = false;//标识符
$("#tell").blur(function() {
var tell = $("#tell").val();
if(tell.length != 11) {
$("#sp3").html("手机号为11位数字")
flas3 = false;
} else {
$("#sp3").css({
"color": "green"
});
$("#sp3").html("√")
flas3 = true;
}
});
var flas4 = false;
$("#sfz").blur(function() {
var sfz = $("#sfz").val();
if(sfz.length != 18) {
$("#sp4").html("手机号为18位数字")
flas4 = false;
} else {
$("#sp4").css({
"color": "green"
});
$("#sp4").html("√")
flas4 = true;
}
});
$("#tj").click(function() {//获取tj的方法
if(flas1 && flas2 && flas3&& flas4) {//都是true
$("#f1").submit();//提交表单
} else {
alert("数据有误！");
return;
}
})
</script>
</html>
2117
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
