📌  相关文章
📜  使用 jbvalidator 插件进行表单验证

📅  最后修改于: 2021-11-07 07:57:40             🧑  作者: 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:
  
  
  

 
  

输出：