表单验证 input验证 email验证

表单验证 input验证 email验证

 

演示

 

 

XML/HTML Code

1. <div class="senp-grid">  
2. <div class="cl-aureal-66">  
3. <label for="test">Email test</label>  
4. <input class="test" name="email" />  
5. <label for="test">只能输入字母</label>  
6. <input class="test" name="only_digits" />  
7. <label for="test">只能输入数字</label>  
8. <input class="test" name="only_numbers" />  
9. <label for="test">2位小数</label>  
10. <input class="test" name="dotted_decimals" />  
11. <label for="test">Comma decimals test</label>  
12. <input class="test" name="comma_decimals" />  
13. <label for="test">Custom (it will check if it's longer than 3 digits or numbers)</label>  
14. <input class="test" name="custom_function" />  
15. <input type="submit" value="test" />  
16. </div>  
17. <div class="cl-aureal-33" id="result"></div>  
18. <div class="clean"></div>  
19. </div>  

 

JavaScript Code

1. <script>  
2.       ( function( $ ) {  
3.           $( function(){  
4.             
5.          $.senpValidate('newRegexp', 'custom_test', /test/ );  
6.            
7.          $.senpValidate('newPlugin', 'hello world', function(instances){  
8.            
9.            var message = 'hello world! running the instance {n} of senpValidate'.replace(/{n}/, instances.core.instanceId );  
10.            
11.            console.log( message );  
12.          });  
13.             
14.            $('input[type=submit]').senpValidate({  
15.              click: function (notValids) {  
16.                  
17.                var target = $('#result');  
18.                
19.                target.empty();  
20.                
21.                $( notValids ).each( function(){  
22.                  target.html( target.html() + this.name + ' is not valid!<br/>' );  
23.                });  
24.              },  
25.              tooltipWidth: 300,  
26.              items: [{  
27.              errorMessage: {  
28.               title: 'Ooops maybe this email is wrong!',  
29.               text: 'A correct email address could be info@mymail.com'  
30.              },  
31.              selector: 'input[name=email]',  
32.              validate: 'email'  
33.            },{  
34.              errorMessage: 'this is not valid! :O',  
35.              selector: 'input[name=only_digits]',  
36.              validate: 'only digits'  
37.            },{  
38.              errorMessage: 'this is not valid! :O',  
39.              selector: 'input[name=only_numbers]',  
40.              validate: 'only numbers'  
41.            },{  
42.              errorMessage: 'this is not valid! :O',  
43.              selector: 'input[name=dotted_decimals]',  
44.              validate: 'dotted decimals'  
45.            },{  
46.              errorMessage: 'this is not valid! :O',  
47.              selector: 'input[name=comma_decimals]',  
48.              validate: 'comma decimals'  
49.            },{  
50.              errorMessage: 'this is not valid! :O',  
51.              selector: 'input[name=custom_function]',  
52.              validate: function( value ) {  
53.                
54.               return ( value.replace( /s+/g, '' ).length ) ? true : false ;  
55.              }  
56.            }]  
57.            });  
58.           });  
59.       })( jQuery );  
60.     </script>  

 

原文地址:http://www.freejs.net/article_biaodan_264.html