使用 EasyUI 框架处理表单

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

从官方网站下载所有需要的预编译文件，并将它们保存在您的工作文件夹中。请在代码实现期间注意文件路径。

EasyUI官方网站：

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

示例 1：以下示例演示了一个简单的用户表单，其中包含带有浮动标签的动画文本字段。 EasyUI框架特有的各种类，如easyui-panel、easyui-textbox 和easyui-linkbutton用于输入控件。对于用户表单中的浮动标签， form-floating-label类 如下所示使用。

HTML

  

    
  
    
  
    
  
    
  
    
    
      
    
    
      
    
    
      
    
    

  

    
        Animated text fields with 
        floating labels
    
  
    
    
  
        
            
                
            
              
                
                
            
  
            
                
            
        
        
            
                Submit
            
              
            
                Clear
            
        
    
  
    
        function submitForm() {
            $('#formID').form('submit');
        }
        function clearForm() {
            $('#formID').form('clear');
        }
        function err(target, message) {
            var target = $(target);
            if (target.hasClass('textbox-text')) {
                target = target.parent();
            }
            var msg = target.next('.error-message');
            if (!msg.length) {
                msg = $('<div class="error-message"></div>')
                    .insertAfter(target);
            }
            msg.html(message);
        }
    

  

输出：

• 用户输入之前
  
• 用户输入后
  

示例2：以下示例演示本地数据和远程数据的加载。它还演示了使用EasyUI框架库的用户表单验证。使用与上述示例相同的类。用于组合框的类是easyui-combox 。请参阅输出图像或视频以更好地理解。

HTML

  

    
    
  
    
  
    
  
    
  
    

  

    Load Form Data using jEasyUI 
  
    Click to load data
  
    
        
            Load Data
        
          
        
            Load Remote Data
        
          
        
            Clear Form
        
    
  
    
  
        
            
                
            
  
            
                
            
  
            
                
            
            
                
                      
                    Chinese
                    Dutch
                    
                        English
                    
                    French
                    German
                    Hindi
                    Indonesian
                    Italian
                    Japanese
                    Korean
                    Russian
                    Spanish
                    Vietnamese
                
            
            
                
                    Accept:
                
                  
                
            
        
  
        
            
                Submit
            
  
        
    
    
        function submitFormData() {
            $('#formID').form('submit', {
                onSubmit: function () {
                    return
                    $(this).form('enableValidation')
                            .form('validate');
                }
            });
        }
  
        function loadData() {
            $('#formID').form('load', {
                name: 'username',
                email: '[e-mail]',
                message: 'usermessage',
                language: 'en',
                accept: true
            });
        }
        function loadDataFromFile() {
            $('#formID').form('load', 'file_data.json');
        }
        function clearFormFields() {
            $('#formID').form('clear');
        }
    

  

file_data.json以下是上述 HTML 代码的loadDataFromFile()函数中使用的“file_data.json”文件的 JSON 数据。

{
    "name":"Tom",
    "email":"[e-mail]",    
    "message":"Tom's Message",
    "language":"hi",
    "accept":"true"
}

输出：

• 点击按钮之前：
  
• 点击按钮后：
  
• 表单验证：