jQuery-文本框事件应用-判断邮箱地址
2017-03-21 22:33
399 查看
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>文本框中的事件应用</title> 5 <script type="text/javascript" 6 src="Jscript/jquery-1.8.2.min.js"> 7 </script> 8 <style type="text/css"> 9 body{font-size:13px} 10 /* 元素初始状态样式 */ 11 .divInit{width:390px;height:55px;line-height:55px;padding-left:20px} 12 .txtInit{border:#666 1px solid;padding:3px;background-image:url('Images/bg_email_input.gif')} 13 .spnInit{width:179px;height:40px;line-height:40px;float:right;margin-top:8px;padding-left:10px;background-repeat:no-repeat} 14 15 /* 元素丢失焦点样式 */ 16 .divBlur{background-color:#FEEEC2} 17 .txtBlur{border:#666 1px solid;padding:3px;background-image:url('Images/bg_email_input2.gif')} 18 .spnBlur{background-image:url('Images/bg_email_wrong.gif')} 19 20 .divFocu{background-color:#EDFFD5}/* div获取焦点样式 */ 21 .spnSucc{background-image:url('Images/pic_Email_ok.gif');margin-top:20px}/* 验证成功时span样式 */ 22 </style> 23 <script type="text/javascript"> 24 $(function() { 25 $("#txtEmail").trigger("focus");//默认时文本框获取焦点 26 27 $("#txtEmail").focus(function() {//文本框获取焦点事件 28 $(this).removeClass("txtBlur").addClass("txtInit"); 29 $("#email").removeClass("divBlur").addClass("divFocu"); 30 $("#spnTip").removeClass("spnBlur") 31 .removeClass("spnSucc").html("请输入您常用邮箱地址!"); 32 }) 33 34 $("#txtEmail").blur(function() {//文本框丢失焦点事件 35 var vtxt = $("#txtEmail").val(); 36 if (vtxt.length == 0) { 37 $(this).removeClass("txtInit").addClass("txtBlur"); 38 $("#email").removeClass("divFocu").addClass("divBlur"); 39 $("#spnTip").addClass("spnBlur").html("邮箱地址不能为空!"); 40 } 41 else { 42 if (!chkEmail(vtxt)) {//检测邮箱格式是否正确 43 $(this).removeClass("txtInit").addClass("txtBlur"); 44 $("#email").removeClass("divFocu").addClass("divBlur"); 45 $("#spnTip").addClass("spnBlur").html("邮箱格式不正确!"); 46 } 47 else {//如果正确 48 $(this).removeClass("txtBlur").addClass("txtInit"); 49 $("#email").removeClass("divFocu"); 50 $("#spnTip").removeClass("spnBlur").addClass("spnSucc").html(""); 51 } 52 } 53 }) 54 /* 55 *验证邮箱格式是否正确 56 *参数strEmail,需要验证的邮箱 57 */ 58 function chkEmail(strEmail) { 59 if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(strEmail)) { 60 return false; 61 } 62 else { 63 return true; 64 } 65 } 66 }) 67 </script> 68 </head> 69 <body> 70 <form id="form1" action="#"> 71 <div id="email" class="divInit">邮箱: 72 <span id="spnTip" class="spnInit"></span> 73 <input id="txtEmail" type="text" class="txtInit" /> 74 </div> 75 </form> 76 </body> 77 </html>
相关文章推荐
- jquery文本框中的事件应用以输入邮箱为例
- 文本框中事件应用(含邮箱地址验证)4-9
- jquery文本框中的事件应用以输入邮箱为例
- 文本框中事件应用(含邮箱地址验证)4-9
- 文本框邮箱地址自动提示jQuery插件
- 文本框邮箱地址自动提示jQuery插件
- 4.设计一个Email邮箱注册应用程序。要求:用户输入完成单击“立即注册”按,判断“密码”和“确认密码”文本框内容是否一致,如果一致在立即注册按钮上方显示用户输入的邮件地址,运行结果如图所示。
- jQuery判断email地址 邮箱地址 email regex
- 数字判断和文本框提交事件,WEB SERVICE等
- 检查字符串是否为电话号码或邮箱地址方法,并返回true or false的判断值
- jQuery browser msie 判断 浏览器 ie6 bug jQuery中浏览器版本判断的一个BUG,此BUG已影响到jqModal,thickbox等多个jQuery插件的应用
- jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
- 判断用户输入的邮箱地址是否合法的代码
- JS来判断文本框内容改变事件
- jQuery 判断元素上是否绑定了事件
- 事件委托在jQuery和KISSY内核中的应用
- android 入门学习笔记 判断网页地址 邮箱 电话号码 符合要求的加链接~
- Jquery插件--判断文本框还剩多少字符可以输入
- jquery 监控文本框键盘事件(回车事件)
- jquery 验证文本框数字事件|有效|快捷 给控件绑定清楚非数字事件