jquery表单实时验证

 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>