用jQuery怎么制作简单的表单验证,代码是什�

Admin 2022-06-27 群英技术资� 52 次浏�

今天这篇给大家分享的知识是“用jQuery怎么制作简单的表单验证,代码是什么�,小编觉得挺不错的,对大家学习或是工作可能会有所帮助,对此分享发大家做个参考,希望这篇“用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;
 }

到此这篇关于“用jQuery怎么制作简单的表单验证,代码是什么”的文章就介绍到这了,更多相关用jQuery怎么制作简单的表单验证,代码是什么内容,欢迎关注群英网络技术资讯频道,小编将为大家输出更多高质量的实用文章� 群英智防CDN,智能加速解决方案
标签� jquery表单验证

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�

猜你喜欢

成为群英会员,开启智能安全云计算之旅

立即注册
专业资深工程师驻�
7X24小时快速响�
一站式无忧技术支�
免费备案服务
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 � 0668-2555555
在线客服
微信公众号
返回顶部
返回顶部 返回顶部