jQuery表单验证实例 / 包含用户名、密码、住址、邮箱验证
jQuery表单验证实例 / 包含用户名、密码、住址、邮箱验证
如下图
别忘了引入jQuery框架!!!
话不多说直接先上jQuery部分代码:
<script type="text/javascript">$(document).ready(function(){var tip1 = "<span class='span1'>用户名不能为空!</span>";//声明发生错误时在输入框后面添加的spanvar 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;}
jQuery表单验证实例 / 包含用户名、密码、住址、邮箱验证相关推荐
- php表单确认密码,jQuery表单验证之密码确认实例详解
本文主要为大家详细介绍了jQuery表单验证之密码确认的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 众所周知,在修改密码时会需要两次输入密码.这时如何确保两个密码框 ...
- jquery表单验证小结
jquery表单验证小结 下面将讲述的是一个完整的jquery表单验证实例,该实例覆盖了jquery验证的大部分知识点,比如验证框架,messages的扩展和自定义方法的定义以及在验证中的应用等,接下 ...
- JQuery 表单验证--jquery validation
jquery validation,表单验证控件 官方地址 :http://jqueryvalidation.org/ jquery表单验证 默认值校验规则 jquery表单验证 默认的提示 1 &l ...
- jQuery框架学习第十一天:实战jQuery表单验证及jQuery自动完成提示插件
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQ ...
- jQuery 表单验证设置html(,jquery表单验证
如何用jquery进行表单验证 (1)所需工具: jQuery.1.8.3.js和jquery.validate.js,百度jquery validate插件即可找到下载 (2)引入js (3)按照插 ...
- jQuery 表单验证设置html(,jquery表单验证.html
jquery表单验证 .myform { width: 600px; margin: 50px auto 0; } .p { border: 1px #cecece solid; width: 480 ...
- 一款比较实用齐全的jQuery 表单验证插件
一款比较实用,并且验证类型齐全的jQuery表单验证插件.英文版原作者@Vanadium,由我做中文整理.E文水平有限,如果翻译的有问题的,请大家指出,在此感谢~ 可以验证哪些? 文字,日期,邮箱,网 ...
- html表单提交前验证,jquery表单提交前实现同步验证(附代码)
jquery表单提交前实现同步验证 .int{ height: 30px; text-align: left; width: 600px; } label{ width: 200px; margin- ...
- jQuery 表单验证插件 jQuery Validation Engine 使用
jQuery 表单验证插件 jQuery Validation Engine 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面),指定使用 jQuery Validation Engi ...
最新文章
- 【实用】Angular中如何实现类似Vuex的全局变量状态变化功能?
- QCustomplot设置背景为透明色
- 被3整除的子序列(线性dp)
- php中mysql和mysqli_php mysqli中-和::有什么区别?
- php cdr,win10彻底禁止cdr联网
- ExchangeServer2016 HAB 分层通讯簿 设置教程
- windows验证方式
- Linux chapter 2
- 【zk开发】让eclipse识别×.zul文件为xml格式
- C语言经典100例-6
- 微信取消支付再二次/多次支付及201商户订单号重复解决思路
- Linux - 增加用户、添加用户组
- 【unity 保卫星城】--- 开发笔记04(武器管理系统)
- vr旅游市场竞争分析,破局之路在何方?
- 数字加千分位分隔符,加货币符号,数字转百分数
- SWF是什么文件,SWF文件用什么软件可以打开 1
- 【鼠标移动到上面自动显示提示信息文字】
- 官方yolov5s.pt ,yolo5x.pt下载地址
- 批量替换Scene中的Prefab
- 超市进销存系统管理源码 超市管理系统源码 (CS架构)
热门文章
- 步进伺服电机控制程序: 1.实现步进电机的正转、反转控制 2.相对和绝对位置运动
- FIL近期热点资讯盘点
- sql yog注册码
- 道路场景语义分割综述_王飞龙
- docker 报错:bridge docker0 failed: exchange full
- java 支持的编码格式_Java支持的编码格式(各个国家的语言)
- 各种“假日”的英文表达
- 浪潮ERP技术支持知识库
- 最新:全球IT公司100强排行榜
- 关于选中的磁盘具有MBR分区表。在EFI系统上,Windows只能安装到GPT磁盘。问题解决