jquery 表单验证提交

最新推荐文章于 2024-09-08 21:45:17 发布

Mike_8859

最新推荐文章于 2024-09-08 21:45:17 发布

阅读量526

点赞数

本文链接：https://blog.csdn.net/Mike_chao/article/details/78478940

版权

//功能代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>

<script type="text/javascript"src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
f1 = false;
f2 = false;
f3 = false;
f4 = false;

$("#name").blur(function() {
var name = $("#name").val();
var s1 = $("#S1");
if(name.length>3 || name != ""){
s1.html("");
f1=true;
}else{
s1.html("用户名格式不对");
f1=false;

}
});

$("#email").blur(function() {
var email = $("#email").val();
var s2 = $("#S2");
var ee=email.match("@");
if(email==null){
s2.text("不能为空")
//s2.css({"color":"red"});//赋颜色
}else {
if (ee == null) {
s2.text("邮箱名不合法")
s2.css({"color": "red"});//赋颜色
f2=false;
} else {
s2.text("√")
s2.css({"color": "green"});//赋颜色
f2 = true;
}
}
});

$("#tel").blur(function(){

var tel = $("#tel").val();

var s3= $("#S3");
if(tel.length==11 || tel != ""){

s3.html("");
f3 = true;

}else{
s3.html("手机号不合法");
f3 = false;
}
});

$("#ID").blur(function(){
var id = $("#ID").val();
var s4= $("#S4");
if(id.length==18 || id != ""){
s4.html("");
f4= true;

}else{

s4.html("身份证号不合法");
f4 = false;
}
});

$("#btn").click(function(){
if(f1 && f2 && f3 && f4 == true){

//alert("跳转");
window.location.href="http://www.baidu.com";

}else{
alert("请填写正确信息");
}
});

});
</script>

</head>
<body>

//表单

<form action="" method="get"><br />
姓名:<input type="text" id="name" /><span id="S1"></span><br />
Email地址:<input type="text" id="email" /><span id="S2"></span><br />
手机号:<input type="text" id="tel" /><span id="S3"></span><br />
身份证号码:<input type="text" id="ID" /><span id="S4"></span><br />
<input type="button" id="btn" value="提交" />
</form>
</body>
</html>