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

BootStrap4登录表单验证示例

首先是效果图，如下

   
    密码长度至少为六位,只能是大小写字母或数字！
   
   
    请输入正确格式的邮箱
   

然后使用JQuery或者JS在触发表单提交事件的时候，检查表单是否合法。若不合法，给form元素添加上“was-validated”类，并阻止表单的提交。（给form元素加上“was-validated”类之后就会显示表单校验成功或失败的样式了）

注意使用BootStrap4的表单验证需要给form元素添加novalidate，以此屏蔽浏览器的默认表单检查（浏览器默认的表单检查会覆盖掉BootStrap4的表单检查效果）。

此外，BootStrap的验证样式还有另外一种效果，如下图

Code

    
       
           
                   
   
    
    
        
     
            
      Email            
      
                
                       
       
        请输入正确格式的邮箱
       
            
      
        
     
        
     
            
      Password            
      
                
                       
       
        密码长度至少为六位,只能是大小写字母或数字！
       
            
      
        
     
        
     
            
      
                
       
Radio
                
       
                    
        
 
          
         radio1 
        
                    
        
 
          
         radio2 
        
                    
        
 
          
         radio3 
        
                
       
            
      
        
     
        
     
            
      Checkbox            
      
                
       
                    
                            
        Example checkbox                
       
            
      
        
     
        
     
            
      
                
       Sign in            
      
        
     
    
    
   

转载地址：http://rbamf.baihongyu.com/