jQuery实现表单验证功能

jQuery表单验证实例 / 包含用户名、密码、住址、邮箱验证

如下图

别忘了引入jQuery框架！！！

话不多说直接先上jQuery部分代码：

<script type="text/javascript">
$(document).ready(function(){
 var tip1 = "<span class='span1'>用户名不能为空!</span>";//声明发生错误时在输入框后面添加的span
 var tip2 = "<span class='span2'>邮箱格式错误或不能为空!</span>";
 var tip3 = "<span class='span3'>地址不能为空!</span>";
 var tip4 = "<span class='span4'>密码长度不能小于五位且最多为十位 !</span>";
 var condition = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;//声明判定邮箱格式的条件
 $(".id").blur(function(){
  if(!$(".id").val()){//判定用户名非空
   $(".span1").remove();
   $(".id").after(tip1);
  }
  else{
   $(".span1").remove();
  }
 });
 $(".email").blur(function(){

if(!condition.test($(".email").val())){//判定邮箱格式
   $(".span2").remove();
   $(".email").after(tip2);
  }
  else{
   $(".span2").remove();
  }

});
 $(".adress").blur(function(){
  if(!$(".adress").val()){//判定地址非空
   $(".span3").remove();
   $(".adress").after(tip3);
  }
  else{
   $(".span3").remove();
  }
 });
 $(".pwd").blur(function(){

if($(".pwd").val().length < 5||$(".pwd").val().length >10){//判定密码长度不能小于5位且不能大于10位
   $(".span4").remove();
   $(".pwd").after(tip4);
  }
  else{
   $(".span4").remove();
  }
 });
 $(".button").click(function(){//符合所有条件则弹出弹窗表单验证通过，如果不符合则弹出弹窗提醒用户更改
  if(!$(".id").val()||!condition.test($(".email").val())||!$(".adress").val()||$(".pwd").val().length < 5||$(".pwd").val().length >10){
   alert("注册信息有误，请更改个人信息");
  }
  else{
   alert("注册成功");
  }
 })
})
</script>

结构和样式：

<div class="main_box">
 <div class="title">
  欢迎注册原魔
 </div>
 <div class="box">
 <img alt="插图"  src="./img/可莉派萌.png" class="img">
  <form>
   用户名:<input class="id" type="text" ><br>
   邮&emsp;箱:<input class="email" type="text"><br>
   地&emsp;址:<input class="adress" type="text"><br>
   密&emsp;码:<input class="pwd" type="password"><br>
   <button type = "button" class="button">注&emsp;&emsp;&emsp;册</button>
  </form>
 </div>
</div>

span{
 color:white;
}
body{
 font-family: sans-serif;
}
.main_box{
 width: 100％;
 height: 910px;
 background-color: red;
 background-image: linear-gradient(#e66465, #000000);
}
.title{
 font-size: 5em;
 color: white;
 width:100％;
 height: 100px;
 text-align: center;
}
.box{
 width: 1050px;
 height: 310px;
 margin: 150px auto 50px auto;
 padding-left: 360px;
}
input{
 height: 40px;
 width: 200px;
 border-radius: 20px;
 border: solid 1px #B5B5B5;
 margin: 10px;
 font-size: 1.2em;
}
form{
 color:white;
 font-size:1.2em;
 float: left;
 margin-left: 50px;
}

.button{
 width: 280px;
 height: 40px;
 background-color: #9781FD;
 border-radius: 25px;
 color:white;
 font-size: 1.3em;
 font-weight: 700;
 margin-top: 10px;

}
.img{
 width:310px;
 height: 310px;
 float: left;
}

来源：https://blog.csdn.net/qq_46686675/article/details/120874191