📜  如何使用 jQuery EasyUI 加载和验证表单数据?

📅  最后修改于: 2021-11-07 08:38:47             🧑  作者: Mango

EasyUI是一个 HTML5 框架,用于使用基于 jQuery、React、Angular 和 Vue 技术的用户界面组件。它有助于为交互式 Web 和移动应用程序构建功能,为开发人员节省大量时间。它有助于为交互式 Web 和移动应用程序构建功能,为开发人员节省大量时间。

从官方网站下载所有需要的预编译文件并将其保存在您的工作文件夹中。请在代码实现过程中注意正确的文件路径。

jQuery EasyUI 官方网站:

https://www.jeasyui.com/index.php

示例 1:以下代码演示了使用jQuery EasyUI框架设计基本用户表单。

HTML


    

    
  
    
  
     
    
  
      
  
     
  
    
    
  
    
    

    

    

jQuery EasyUI basic user form

       
        
                                        
                                            
                                        
                             
                           
                                              
                           
                             
        
                   
                                          Submit                                              Reset                      
    
            


HTML



    
  
    
     
   
    
             
    
        
    
      
   
    
      
   
        

  

    

        jQuery EasyUI load          user form data     

       
           
                        
                                         
                                      
                           
                           
                                        
                           
                           
         
                    
                                                    Reset                                            Load Data                                            LoadRemote                      
     
                    


HTML



      
    
     
   
    
    
    
    
    
    
    
    
    
   
        

    

     

       jQuery EasyUI load user form data      

                 
                  
                           
                                         
                            
                            
                     
                  
                                             Submit                                                       Reset                                  
     
               


输出:

  • 执行前:

  • 执行后:

示例 2:以下代码演示了从当前本地文件和远程 JSON 文件加载表单数据。

HTML




    
  
    
     
   
    
             
    
        
    
      
   
    
      
   
        

  

    

        jQuery EasyUI load          user form data     

       
           
                        
                                         
                                      
                           
                           
                                        
                           
                           
         
                    
                                                    Reset                                            Load Data                                            LoadRemote                      
     
                    

form-data.json:下面是上面代码中使用的文件“form-data.json”的数据。

{
"name":"sandeep",
"email":"sandeep@gmail.com",  
"message":"Hello GFG",
"language":"hi"  
}

输出:

示例 3:以下代码显示了如何使用jQuery EasyUI插件启用验证。

HTML




      
    
     
   
    
    
    
    
    
    
    
    
    
   
        

    

     

       jQuery EasyUI load user form data      

                 
                  
                           
                                         
                            
                            
                     
                  
                                             Submit                                                       Reset                                  
     
               

输出: