用jQuery怎么制作简单的表单验证,代码是什�
Admin 2022-06-27 群英技术资� 52 次浏�
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> � �:<input class="email" type="text"><br> � 址:<input class="adress" type="text"><br> � �:<input class="pwd" type="password"><br> <button type = "button" class="button">�   �</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; }
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
这篇文章主要给大家介绍了关于uniapp的核心知识,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
怎样用vue做下拉加载更多效果?我们在很多文章或者咨询网站上,常常能看到下拉加载更多效果,这种效果能好的折叠空间,让网站排名更美观,因此很多站长会应用这个效果,那么用vue如何实现下拉加载更多效果呢?下面我们来具体看看�
这篇文章主要为大家介绍了vue parseHTML函数源码解析 AST预备知识示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加�
这篇文章给大家分享一个jQuery相关示例,需求是判断点击了哪个li,这里使用到的方法index()方法,文中示例代码有一定的参考价值,感兴趣的朋友可以了解看看,下面我们一起来学习一下jQuery中判断点击哪个li的方法�
这篇文章主要为大家详细介绍了微信小程序复选框组件使用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一�
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所�
增值电信经营许可证 : B1.B2-20140078