用jquery实现简单的表单验证-白红宇

用jquery实现简单的表单验证

阅读量：4677 次

发布时间：2019-06-09

本文共 3250 字，大约阅读时间需要 10 分钟。

HTML代码：

1 
     
       2   
      
        3     
       
         4       
        用户名： 5       
         6       
        用户名不能为空！ 
       
 7     
       
         8       
        邮箱： 9       
        10       11       
        邮箱格式错误! 
       
12     
       
        13       
        电话号码：14       
        15       
        电话号码格式正确！ 
       
16     
       
        17       
        留言：18       
        19       
        留言不能为空！ 
       
20     
       
        21       
        22     
       
23   
      
24   25

css代码：

1 #content div label { 2     display: inline-block; 3     width: 100px; 4     text-align: right; 5 } 6 #content div { 7     margin-top: 10px; 8 } 9 #content textarea {10     vertical-align: top;11     height: 5em;12 }13 #content span {14     display: none;15     color: #f00;16 }17 .submit-box {18     padding-left: 50px;19 }20 #content input.fail, #content textarea.fail {21     border: 1px solid #F00;22 }23 #content input.succ, #content textarea.succ {24     border: 1px solid #06F;25 }

jquery代码：

1 $(function(){ 2         //用户名非空验证 3         $("#username").on("input",function(){ 4             var $this=$(this); 5            if($this.val()){ 6              $(this).addClass("succ").removeClass("fail"); 7             }else{ 8              $(this).addClass("fail").removeClass("succ"); 9             }10         })11         //邮箱验证12         $("#email").on("input blur",function(){13            var $this=$(this);14           var re = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;15            var is_email=re.test($(this).val()); 16            if(is_email){17                 $(this).addClass("succ").removeClass("fail");18             }else{19                 $(this).addClass("fail").removeClass("succ");20             }21         });22           //验证手机号码23         $("#tel").on("input",function(){24             var $this=$(this);25             var re=/1\d{10}/;26             var is_tel=re.test($(this).val());27             if(is_tel){28                  $(this).addClass("succ").removeClass("fail");29             }else{30                  $(this).addClass("fail").removeClass("succ");31             }32         });33         //留言非空验证34         $("#mess").keyup(function(event) {35             var $this=$(this);36             if($this.val()){37                 $(this).addClass("succ").removeClass("fail");38             }else{39                  $(this).addClass("fail").removeClass("succ");40             }41         });42         43         $("#form-data").submit(function(event){44             var falg=true;45              //$('element', this)相当于$(this).find('element')46             $("input,textarea",this).each(function() {47                 var $this=$(this);48                 var is_succ=$this.hasClass("succ");49                 if(is_succ){50                     $this.siblings(".error").hide();51                 }else{52                     $this.siblings(".error").show();53                    falg=false;54                 }55             });56             if(falg){57                   alert("submit success!");58              }else{59                   event.preventDefault();60              }61         });62           63     })

效果图如下：