入门 CSS 表单组验证

Primer CSS是一个免费的开源 CSS 框架，它建立在创建基本样式元素（如间距、排版和颜色）的系统之上。这种系统化的方法确保我们的模式是稳定的并且可以相互操作。它的 CSS 方法受到面向对象的 CSS 原则、函数式 CSS 和 BEM 架构的影响。它具有高度可重用性和灵活性。它是使用 GitHub 的设计系统创建的。

在本文中，我们将讨论Primer CSS Form Group Validation 。表单组具有要传达给用户的成功、错误和警告验证消息。

入门 CSS 表单组验证类：

• 成功：当输入有效时，该类被添加到表单组类中。
• note：该类用于显示消息注释。
• 成功：该类与.note类一起添加，用于以绿色显示成功消息。
• 错误：当输入无效时，此类被添加到.form-group类中。
• error：这个类是在.note类中添加的，用于以红色显示错误信息。
• warn：当输入应显示警告消息时，此类被添加到.form-group类中。
• 警告：该类与.note类一起添加，用于以黄色显示警告消息。

句法：

  

    

      ...
    
    
    

      
    
    
    

        ...
    
  

示例 1：下面的示例通过成功消息演示了如何使用 Primer CSS 表单组验证。

HTML

  

    
       

  

    

        
GeeksforGeeks
        
Primer CSS Form Group Validation
  
        

            

                

                    
                        GfG-Coupon-Code
                    
                
  
                

                    
                
                

                    Coupon code Applied
                
  
            
        
    

  

输出：

入门 CSS 表单组验证

示例 2：下面的示例通过错误消息演示了 Primer CSS 表单组验证的使用。

HTML

  

    
       

  

    

        
GeeksforGeeks
        
Primer CSS Form Group Validation
  
        

            

                

                    
                        GfG Coupon Code
                    
                
  
                

                    
                
                

                    Invalid Coupon code
                
  
            
        
    

  

输出：

入门 CSS 表单组验证

示例 3：下面的示例通过警告消息演示了 Primer CSS 表单组验证的使用。

HTML

  

    
       

  

    

        
GeeksforGeeks
        
Primer CSS Form Group Validation
  
        

            

                

                    
                        GfG Coupon Code
                    
                
  
                

                    
                
                

                    Please add a valid 4 character coupon code
                
  
            
        
    

  

输出：

入门 CSS 表单组验证

参考： https://primer.style/css/components/forms#form-group-validation