<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery学习系统-验证文本框的运用</title>
<link href="/res/common.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
.divInit{
width:390px;
height:55px;
line-height:55px;
padding-left:20px;
}
.txtInit{
border:1px solid #666;
padding:3px;
background-image:url('');
}
.spnInit{
width:179px;
height:40px;
line-height:40px;
margin-top:8px;
padding-left:10px;
background-repeat:no-repeat;
}
/*元素丢失焦点样式*/
.divBlur{
background-color:#FEEEC2;
}
.txtBlur{
border:1px solid #666;
padding:3px;
background-image:url('');
}
.spnBlur{
background-image:url('');
}
/*元素获取焦点样式*/
.divFocu{
background-color:#EDFFD5;
}
/*验证成功后样式*/
.spnSucc{
background-image:url('/img/right.jpg');
margin-top:20px;
}
</style>
<script type="text/javascript" src="/res/jquery-1.6.3.js"></script>
<script type="text/javascript">
/**
* 验证邮箱格式是否正确
* 参数strEmail，需要验证的邮箱
*/
chkEmail=function (strEmail){
if(!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(strEmail)){
return false;
}else{
return true;
}
};
$(document).ready(function(){
$("#txtEmail").trigger("focus");
$("#txtEmail").focus(function(){
$(this).removeClass("txtBlur").addClass("txtInit");
$("#email").removeClass("divBlur").addClass("divFocu");
$("#spnTip").removeClass("spnBlur").removeClass("spnSucc").html("请输入你常用邮箱地址!");
});
$("#txtEmail").blur(function(){
var emailTxt=$("#txtEmail").val();
if(emailTxt.length==0){
$(this).removeClass("txtInit").addClass("txtBlur");
$("#email").removeClass("divFocu").addClass("divBlur");
$("#spnTip").addClass("spnBlur").html("邮箱地址不能为空!");
}else{
if(!chkEmail(emailTxt)){
$(this).removeClass("txtInit").addClass("txtBlur");
$("#email").removeClass("divFocu").addClass("divBlur");
$("#spnTip").addClass("spnBlur").html("邮箱地址格式不正确!");
}else{
$(this).removeClass("txtBlur").addClass("txtInit");
$("#email").removeClass("divFocu");
$("#spnTip").addClass("spnSucc").html("");
}
}
});
});
</script>
</head>
<body>
<div align="center">
<form action="#" id="form1">
<div id="email" class="divInit">邮箱:
<input id="txtEmail" type="text" class="txtInit"/>
<span id="spnTip" class="spnInit" ></span>
</div>
</form>
</div>
</body>
</html>
分享到：
相关推荐
(8）当验证控件出现验证错误时，焦点会定位在出现验证错误的文本框中。(9）若通过所有的验证，则显示"验证通过！"的信息。 2．设计并实现同一个页面的分组验证功能 要求如下： (1）页面浏览效果如图5-3所示。 (2）如...
#region 验证文本框输入为数字 /// /// 验证是不是数字（包含整数和小数） /// /// <param name=str></param> /// <returns></returns> public static bool GetNum(string str) { return Regex.IsMatch
1.让文本框只允许输入数字，运用asp.net mvc3.0的文本框控件 代码如下: @Html.TextBox(“txt”,null, new {@style=”width:300;”,onkeypress=”return RegValidateIsDigit(event)” }) 可以看到在文本框中注册了...
论文首先较为详尽地介绍了管理课程的有关概念与知识，特别介绍了相关延伸表现形式，本统系统是运用JSP技术来实现的。其主要功能有：系统用户管理,收入记录, 支出记录,财产查询,还贷助手,储蓄提醒等。论文在撰写过程...
网络信息安全综合实验 任 务 书 一、 目的与要求 根据实验内容的要求和实验安排，要求学生在掌握网络信息安全基本知识的基础上， 能够设计出相应的软件，并且熟练地运用各种网络信息安全技术和手段，发现并解决各 类...
102 <br>0162 如何实现C#中用键完成TAB的功能 102 <br>0163 如何限制文本框密码输入长度 102 <br>0164 数据输入为空提示 103 <br>0165 如何设置文本框光标到末尾 103 <br>0166 输入法调整...
实例032 Zend Studio中快捷键的运用 57 实例033 Zend Studio中部署Apache服务器 60 第2章 PHP基础 63 2.1 基本语法 64 实例034 在页面中打印PHP的配置信息 64 实例035 在页面中打印服务器时间 65 实例036 在页面中...
〔3〕单击"完成〞按钮，翻开"创立到SQL Server的新数据源〞对话框，在"名称〞文本框中设置数据源名称为"wangming〞〔即程 序里面的DSN〕，在"描述〞文本框设置数据源描述为"配置SQL Server数据库DSN〞，在"效劳器〞...
控件的使用：button按钮控件/EditText文本框控件/imageView图片视图控件等。 3 功能需求 五子棋分为五个模块：开始游戏、游戏说明、最高纪录、游戏设置、退出游戏。 3.1 开始游戏： 点击进入游戏。 3.2 游戏说明： ...
通过实现通讯薄功能的实际编程了解基于Swing的图形用户界面开发和数据库操作原 理，提高Swing和JDBC技术结合的综合运用能力。 2. 需求分析 1. 用户需求分析 通讯簿的目的在于帮助用户实现轻松管理联系人的需求。 ...
实例032 Zend Studio中快捷键的运用 57 实例033 Zend Studio中部署Apache服务器 60 第2章 PHP基础 63 2.1 基本语法 64 实例034 在页面中打印PHP的配置信息 64 实例035 在页面中打印服务器时间 65 实例036 在页面中...
实例032 Zend Studio中快捷键的运用 57 实例033 Zend Studio中部署Apache服务器 60 第2章 PHP基础 63 2.1 基本语法 64 实例034 在页面中打印PHP的配置信息 64 实例035 在页面中打印服务器时间 65 实例036 在页面中...
理解面向对象的软件设计基本理论，学习VB软件设计的基本方法，熟悉一般软件项目开发的基本步骤，培养运用VB解决实际问题的能力和技巧。 课程设计的主要内容和要求（包括原始数据、技术参数、设计要求、工作量要求...
2.9.3 运用密码来保护工作簿 2.9.4 使用密码来保护VBA代码 2.10 图表 2.11 形状和SmartArt 2.12 数据库访问 2.12.1 工作表数据库 2.12.2 外部数据库 2.13 Internet特性 2.14 分析工具 2.14.1 ...
130 实例095 使用ErrorProvider组件验证文本框输入 130 实例096 利用ErrorProvider组件查看数据集中的错误 132 3.3 EventLog组件 134 实例097 使用EventLog组件读写Windows系统事件日志 134 ...
实例104 使用ErrorProvider组件验证文本框输入 150 3.3 EventLog组件 151 实例105 使用EventLog组件读写Windows系统事件日志 151 实例106 使用EventLog组件保存Windows系统日志 153 实例107 使用EventLog组件向...
实例104 使用ErrorProvider组件验证文本框输入 150 3.3 EventLog组件 151 实例105 使用EventLog组件读写Windows系统事件日志 151 实例106 使用EventLog组件保存Windows系统日志 153 实例107 使用EventLog组件向...
实例104 使用ErrorProvider组件验证文本框输入 150 3.3 EventLog组件 151 实例105 使用EventLog组件读写Windows系统事件日志 151 实例106 使用EventLog组件保存Windows系统日志 153 实例107 使用EventLog组件向...