jQuery实现表单验证功能
作者:赶不上明天 发布时间:2024-04-09 19:49:07
标签: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>
邮 箱:<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;
}
来源:https://blog.csdn.net/qq_46686675/article/details/120874191
0
投稿
猜你喜欢
- REPLACE的运行与INSERT很相似。只有一点例外,假如表中的一个旧记录与一个用于PRIMARY KEY或一个UNIQUE索引的新记录具
- 之前有文章,使用Android平台的OpenCV接入了视频,控制的目标是手机的摄像头,这是OpenCV的好处,使用OpenCV可以使用跨平台
- Python自带的 functools 模块提供了一些常用的高阶函数,也就是用于处理其它函数的特殊函数。换言之,就是能使用该模块对可调用对象
- 前言总结一下最近看的关于opencv图像几何变换的一些笔记. 这是原图: 1.平移import cv2import numpy as npi
- 在连接数据库的url地址有点不一样jdbc:oracle:thin:@(DESCRIPTION=(LOAD_BALANCE=on)(ADDR
- 每周的《午间欢乐购》和《周末疯狂购》,已经成为视觉组的固定需求。从开始接触到现在5个月的时间里,思维也和这些小小banner逐渐碰撞出火花。
- 一、简介实现计算机视觉任务的过程中,不可避免地需要对图像进行读写操作以及图像预处理操作,下面介绍两个常用的Python图像处理库:OpenC
- 废话不多说了直接给大家贴代码了。代码如下:<script language="JavaScript"><
- 本文实例总结了PHP常用字符串函数用法。分享给大家供大家参考,具体如下:字符串函数explore使用一个字符串分割另一个字符串结果为数组&l
- 优化场景利用视图函数(views)查询数据之后可以通过上下文context、字典、列表等方式将数据传递给HTML模板,由template引擎
- 背景:数据库中逗号拼接的字符串,想展示其完整拼接名称或者按其值统计处理,怎么做?FIND_IN_SET函数和GROUP_CONCAT函数你会
- 敲了这么多年代码,每年都得画一些心啊花啊什么的,所以现在常规的已经有些倦怠了,至少也得来个三维图形才看着比较合理,而且光是三维的也没啥意思,
- SQL Server是一种关系型数据库管理系统(RDBMS),由微软公司开发和维护。它支持结构化查询语言(SQL)和Transact-SQL
- 模仿IE自动完成功能,支持Firefox.支持方向键操作运行代码框<!DOCTYPE HTML PUBLIC "-//W3C
- 正在看的ORACLE教程是:Oracle 数据表分区的策略。本文描述通过统计分析出医院信息系统需分区的表,对需分区的表选择分区键,即找出包括
- 生成一个2000*5的表格,每个单元格的内容是行号+逗号+列号 方法一:使用createElement生成表格,使用insertRow和in
- 模块:包含定义函数和变量的python文件,可以被别的程序引入。os模块是操作系统接口模块,提供了一些方便使用操作系统相关功能函数,这里介绍
- 很神奇的一个晚上,居然在以前老同事的群里跟同事讨论起CSS的东西来了,不过很意外的还是有收获。在IE中常常会碰到如果将容器定位后,出现容器内
- 目录1. 现实背景2. 约定3. 配置 master3.1. 配置启动参数3.2. 重启服务使参数生效3.3. 以 root 身份登录,创建
- 今天我升级MYSQL到5.1的时候遇到的。写出来共享以下。1、[root@localhost mysql]# scripts/mysql_i