jquery文本框中的事件应用以输入邮箱为例

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

代码如下：复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head title jquery文本框中的事件应用/title style type=' text/CSS ' body { font-size :13 px；} /*元素初始化样式*/.divInit { width :390 pxh three :55 px线高：55 px左填充left:20px}。txtInit {边框：实心1px # 666padding:3px背景-image : URL(' Images/BG _ email _ input。gif ')；} .spnInit { width:179px高度：40 px线高：40 px右浮动：页边距-top :8 px；填充-左侧：10 px背景-重复：不重复；} /*元素丢失焦点样式*/.div blur {底色： # feeec 2；} .txtBlur {边框：实心1px # 666padd :3 pxbackground-image : URL(' Images/BG _ email _ input 2。gif ')；} .spnBlur { background-image : URL(' Images/BG _ email _ error。gif ')；} .div focu {底色： # EDFD5} /*div获取焦点样式*/.spnSucc { background-image : URL(' Images/pic _ Email _ ok。gif ')；页边距-顶部：20 px} /*验证成功时跨度样式*//样式脚本src=' http : script/jquery-1。4 .1-vsdoc。js ' type=' text/JavaScript '/script script src=' http : script/jquery-1。4 .1 .js ' type=' text/JavaScript '/script script type=' text/JavaScript ' $(function(){ $(' # txtEmail ')).触发器("焦点");//默认时文本框获得焦点$('#txtEmail ').focus(function () { //文本框获取焦点事件$(这个)。removeClass('txtBlur ').添加类(' TxTinit ')；$('#email ').移除类(“DivBlury”).添加类(' DivFocu ')；$('#spnTip ').removeClass('spnBlur ').removeClass('spnSucc ').html(")请输入您常用邮箱地址！');});$('#txtEmail ').模糊（函数(){ //文本框丢失焦点事件var vTxt=$('#txtEmail ').val()；if (vTxt.length==0) { //文本框中是否输入了邮箱$(这个)。removeClass('txtInit ').添加CLaSS(' TxTBlur ')；$('# email ').removeClass('divFocu ').添加类(' DivBlury ')；$('#spnTip ').addClass('spnBlur ').html(")邮箱地址不能为空!');} else { //检测邮箱格式是否正确if(！chkEmail(vTxt)) { //如果不正确$(这个)。removeClass('txtInit ').添加CLaSS(' TxTBlur ')；$('#email ').removeClass('divFocu ').添加类(' DivBlury ')；$('#spnTip ').addClass('spnBlur ').html(")邮箱格式不正确！');} else { //如果正确$(这个)。removeClass('txtBlur ').添加类(' TxTinit ')；$('#email ').移除类(' DivFocu ')；$('#spnTip ').removeClass('spnBlur ').addClass('spnSucc ').html(" ")；} } });/*验证邮箱格式是否正确参数strEmail，需要验证的邮箱*/函数chke mail(stremail){ var vchk=/^\w([-]。]\ w)* @ \ w([-].]\w )*\ .\w ([-.]\ w)* $/；if(！vchk。test(StreMail)){ return false；} else { return true } } })；/脚本/标题正文表单id=' form 1 ' action=' # ' div id=' email ' class=' Divinit '邮箱： span id=' SPntip ' class=' SPninit '/span输入类型=' text ' id=' TxTemail ' class=' TxTinit '/div/form/body/html