设为首页 加入收藏

TOP

jQuery文本框中的事件应用
2014-11-24 12:49:16 来源: 作者: 【 】 浏览:0
Tags:jQuery 文本 事件 应用

文本框中的事件应用:以输入邮箱为例,如图:






代码如下:





jquery文本框中的事件应用

<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/java script">
<script src="Scripts/jquery-1.4.1.js" type="text/java script">
<script type="text/java script">
$(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 vTxt = $("#txtEmail").val();
if (vTxt.length == 0) { //文本框中是否输入了邮箱
$(this).removeClass("txtInit").addClass("txtBlur");
$("# email").removeClass("divFocu").addClass("divBlur");
$("#spnTip").addClass("spnBlur").html("邮箱地址不能为空!");
}
else { //检测邮箱格式是否正确
if (!chkEmail(vTxt)) { //如果不正确
$(this).removeClass("txtInit").addClass("txtBlur");
$("#email").removeClass("divFocu").addClass("divBlur");
$("#spnTip").addClass("spnBlur").html("邮箱格式不正确!");
}
else { //如果正确
$(this).removeClass("txtBlur").addClass("txtInit");
$("#email").removeClass("divFocu");
$("#spnTip").removeClass("spnBlur").addClass("spnSucc").html("");
}
}
});
/*验证邮箱格式是否正确 参数strEmail,需要验证的邮箱*/
function chkEmail(strEmail) {
var vChk = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if (!vChk.test(strEmail)) {
return false;
}
else {
return true;
}
}
});




邮箱:






】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
分享到: 
上一篇S3C2440上RTC时钟驱动 下一篇jQuery导航条在项目中的应用

评论

帐  号: 密码: (新用户注册)
验 证 码:
表  情:
内  容:

·如何利用Python做数 (2025-12-24 23:48:36)
·如何使用python进行 (2025-12-24 23:48:34)
·python 爬虫入门该怎 (2025-12-24 23:48:31)
·Java 实现多个大文件 (2025-12-24 23:22:00)
·Java多线程编程在工 (2025-12-24 23:21:56)