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

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
  
    
        
              
            
            
              
                
            
              
            
            
                
            
              
            
                
                
            
              
            
                            
                    Arabic
                    Dutch
                    
                    English
                    French
                    German
                    Greek
                    Hindi
                    Japanese
                    Korean
                
            
        
          
        
            
            
                Submit
            
  
            
                Reset
            
        
    
  
    
  
        // Submit the form
        function submitForm(){
            $('#formID').form('submit');
        }
          
        // Reset the form
        function clearForm(){
            $('#formID').form('clear');
        }
    

    

输出：

• 执行前：

• 执行后：

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

HTML

    
  
    
     
   
    
             
    
        
    
      
   
    
    
      
   
    
        

  

    
        jQuery EasyUI load 
        user form data
    
  
    
  
        
  
        
            
             
              
            
              
          
            
              
            
              
            
            
              
            
              
            
              
                Arabic
                Dutch
                
                English
                French
                German
                Greek
                Hindi
                Japanese
                Korean
              
            
         
          
         
                       
           
                Reset
           
  
           
                Load Data
           
  
           
                LoadRemote
            
        
     
      
     
  
        // Reset the form
        function clearForm(){
           $('#formID').form('clear');
        }
  
        // Load data
         function loadData(){
           $('#formID').form('load',{
                name:'Sahil',
                email:'[e-mail]',                
                message:'hello GFG',
                language:'en'                
            });
         }
  
        // Load remote json file data
        function loadRemoteData(){
            $('#formID').form('load','form-data.json');
        }
    
    
  

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

{
"name":"sandeep",
"email":"[e-mail]",  
"message":"Hello GFG",
"language":"hi"  
}

输出：

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

HTML

      
    
     
   
    
    
    
    
    
    
    
    
    
    
   
    
        

    

     
       jQuery EasyUI load user form data
         
      
     
         
        
  
           
            
            
               
            
  
            
            
               
                        
        
         
        
                
            
               Submit
            
            
            
               Reset
                        
        
     
    
     
        // submit the form
        function submitForm(){
            $('#formID').form('submit',{
                onSubmit:function(){
                    return $(this)
                    .form('enableValidation')
                    .form('validate');
                }
            });
        }
  
        // Reset the form
        function clearForm(){
            $('#formID').form('clear');
        }
    

    

输出：