📜  使用 jbvalidator 插件进行表单验证

📅  最后修改于: 2021-11-25 04:11:00             🧑  作者: Mango

jbvalidator是一个基于 jQuery 和 Bootstrap 的插件,它支持客户端和服务器表单验证。提供的 HTML 数据属性易于使用和理解。该插件提供多语言功能以及自定义验证规则和消息。

从官网下载所需的预编译文件即可使用该插件。然后可以将脚本文件包含在需要验证的页面中。

下面的示例演示了可用的不同类型的验证:

示例 1:以下代码演示了电子邮件 ID 和密码的表单验证。

HTML



  
  
  
 
  
  
 
  
  


  
  

    GeeksforGeeks- form validation using jbValidator   

  
    
        Email ID:
             
      Password:
             
      Re-enter password:
             
           
  
  


HTML
       
    Choose languages you know:     
    C     
    C++     
    Java     
    Python     
    
  


HTML
  Choose a colour:   
          
  


HTML
             
  


HTML
  Enter your text content:
             
  


HTML
  
    Enter URL:     
                
  
  


HTML
  Regex:   
             
      Enter number in range:            
    Enter custom number in range:         
      Choose file:         
    


输出:

  •  当用户输入的密码不匹配时。

          

当密码不匹配时

  • 当用户提供不完整的信息时。

示例 2:以下代码片段演示了复选框的验证。请在表单元素内使用上述 HTML 代码中的代码片段。

HTML

       
    Choose languages you know:     
    C     
    C++     
    Java     
    Python     
    
  

输出:

示例 3:以下代码片段演示了如何在用户的表单元素中使用颜色面板。

HTML

  Choose a colour:   
          
  

输出:

示例 4:以下代码片段演示了如何在用户的表单元素中使用选择框。

HTML

             
  

输出:

示例 5:以下代码片段演示了如何在用户的表单元素中使用   
  

输出:

示例 6:以下代码片段演示了在用户的表单元素中使用 URL 控件。

HTML

  
    Enter URL:     
                
  
  

输出:

示例 7:以下代码片段演示了用户表单元素中的其他控件。

HTML

  Regex:   
             
      Enter number in range:            
    Enter custom number in range:         
      Choose file:         
    

输出: