文本框中事件应用(含邮箱地址验证)4-9
2014-08-22 17:43
405 查看
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文本框中事件应用</title> <script type="text/javascript" src="jquery-2.1.1.min.js"></script> <style type="text/css"> body{font-size:13px} .divInit{width:390px;height:55px;line-height:55px;padding-left:20px} .txtInit{border:#666 1px solid;padding:3px;background-image:url('../Images/005.gif')} .spnInit{width:179px;height:40px;line-height:40px;float:right;margin-top:8px;padding-left:10px;background-repeat:no-repeat} .divBlur{background-color:#FEEEC2} .txtBlur{border:#666 1px solid;padding:3px;background-image:url('../Images/002.gif')} .spnBlur{background-image:url{'../Images/003.gif'}} .divFocu{background-color:#EDFFD5} .spnSucc{background-image:url('../Images/004.gif');margin-top:20px} </style> <script type="text/javascript"> $(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(""); } } }); }) function chkEmail(strEmail){ if(!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(strEmail)){ return false; } return true; } </script> </head> <body> <form id="form1" action="#"> <div id="email" class="divInit">邮箱: <span id="spnTip" class="spnInit"></span> <input id="txtEmail" type="text" class="txtInit"/> </div> </form> </body> </html>
相关文章推荐
- 文本框中事件应用(含邮箱地址验证)4-9
- jQuery-文本框事件应用-判断邮箱地址
- jquery文本框中的事件应用以输入邮箱为例
- jquery文本框中的事件应用以输入邮箱为例
- 验证邮箱地址是否真实有效
- C#验证邮箱地址、网址格式的的方法
- ASP用正则验证邮箱地址手机号码电话号码格式
- Javascript正则表达式验证邮箱地址
- javascript 常见的应用。复选框:全选,反选;mail地址验证;电话号码验证
- objective_c验证邮箱地址是否正确
- jquery 验证文本框数字事件|有效|快捷 给控件绑定清楚非数字事件
- 正则表达式验证邮箱地址
- 在登录页面中js进行正则验证电话号码和邮箱地址,并使用ajax进行用户ID的数据库验证
- php 获取gmail 联系人邮箱,应用oauth2.0验证
- 文本框邮箱地址自动提示jQuery插件
- 正则表达式 验证邮箱地址(替换功能的练习)
- 使用ASP验证email邮箱地址
- 利用JS简单的验证邮箱地址
- 邮箱地址正则表达式验证代码合集脚本之家特别版
- 验证邮箱地址和手机号码 .