1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .onError { 8 color: red; 9 } 10 </style> 11 </head> 12 <body> 13 <form action="" id="myForm"> 14 <div class="init"> 15 <label for="username">username:</label> 16 <input type="text" id="username"/> 17 </div> 18 19 <div class="init"> 20 <label for="email">email:</label> 21 <input type="text" id="email"/> 22 </div> 23 24 <div class="init"> 25 <label for="personInfo">personInfo:</label> 26 <input type="text" id="personInfo"/> 27 </div> 28 29 <div class="sub"> 30 <input type="submit" value="提交" id="send"/> 31 <input type="reset" id="red"/> 32 </div> 33 </form> 34 <script src="jquery.min.js"></script> 35 <script type="text/javascript"> 36 $(function(){ 37 $('#myForm :input').blur(function(){ 38 var $parent = $(this).parent(); 39 //在创建提交元素之前，将当前元素以前的提醒元素都删除 40 $parent.find('.onError').remove(); 41 if($(this).is('#username')){ 42 if($(this).val() == "" || $(this).val().length < 6){ 43 var error_msg = '请至少输入6位的用户名'; 44 $parent.append('<span class="onError">'+error_msg+'</span>'); 45 } 46 } 47 48 if($(this).is('#email')){ 49 if($(this).val() == "" || ($(this).val() != "" && !/w+[@]{1}w+[.]w+/.test($(this).val()))){ 50 var error_msg = '请输入正确的email地址'; 51 $parent.append('<span class="onError">'+error_msg+'</span>'); 52 } 53 } 54 }).keyup(function(){ //为达到实时验证，添加keyup 和 focus 事件 55 /*注意点： 56 trigger()方法触发事件后，还会执行浏览器的默认事件，例如： 57 $('input').trigger("focus); 58 这一行代码不仅会触发为<input>元素绑定的focus事件， 59 也会使<input>元素本身得到焦点（这是浏览器的默认操作）。 60 61 如果只想触发绑定的focus事件，而不想执行浏览器默认操作， 62 可以使用jquery中另一个类似的方法---triggerHandler() 63 $("input").triggerHandler("focus"); 64 该方法会触发<input>元素上绑定的特定事件，同时取消浏览器对此 65 事件的默认操作，即文本框只触发绑定的focus事件，不会得到焦点。 66 */ 67 68 /*这里，trigger('blur')不仅会触发为元素绑定的blur事件， 69 也会触发浏览器默认的blur事件，即不能将光标定位到文本框上。 70 而triggerHandler('blur')只会触发为元素绑定的blur事件， 71 而不触发浏览器默认的blur事件*/ 72 $(this).triggerHandler('blur'); 73 }).focus(function(){ 74 $(this).triggerHandler('blur'); 75 }); 76 77 $('#send').click(function(){ 78 $('#myForm .init :input').trigger('blur'); 79 var numError = $('#myForm .init .onError').length; 80 if(numError){ 81 return false; 82 } 83 alert("注册成功，密码已发送至您的邮箱！"); 84 }); 85 }); 86 </script> 87 </body> 88 </html>