Обработка форм с использованием EasyUI Framework

Опубликовано: 6 Января, 2022

EasyUI - это платформа HTML5 для использования компонентов пользовательского интерфейса на основе технологий jQuery, React, Angular и Vue. Это помогает создавать функции для интерактивных веб-приложений и мобильных приложений, экономя много времени для разработчиков.

Загрузите все необходимые предварительно скомпилированные файлы с официального сайта и сохраните их в своей рабочей папке. Пожалуйста, позаботьтесь о путях к файлам во время реализации кода.

Официальный сайт EasyUI:

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

Пример 1. В следующем примере демонстрируется простая пользовательская форма с анимированными текстовыми полями с плавающими метками. Для элементов управления вводом используются различные классы, специфичные для среды EasyUI, такие как easyui- panel, easyui-textbox и easyui-linkbutton. Для плавающих меток в пользовательской форме класс form-float-label используется, как показано ниже.

HTML

 <!DOCTYPE html>
 < html >
 
< head >
    < meta charset = "UTF-8" >
 
    < link rel = "stylesheet" type = "text/css"
          href = "themes/material-blue/easyui.css" >
 
    < link rel = "stylesheet" type = "text/css"
          href = "themes/icon.css" >
 
    < link rel = "stylesheet" type = "text/css"
          href = "demo.css" >
 
    < script type = "text/javascript"
            src = "jquery.min.js" >
    </ script >
     
    < script type = "text/javascript"
            src = "jquery.easyui.min.js" >
    </ script >
     
    < script type = "text/javascript"
            src = "plugins/jquery.validatebox.js" >
    </ script >
     
    < script type = "text/javascript"
            src = "plugins/jquery.textbox.js" >
    </ script >
 </ head >
 
< body >
    < h2 >
        Animated text fields with
        floating labels
    </ h2 >
 
    < div style = "margin:20px 0;" ></ div >
    < div class = "easyui-panel" style =
        "width:100%;max-width:400px;padding:30px 60px;" >
 
        < form id = "formID" method = "post" >
            < div class = "form-floating-label form-field"
                style = "margin-bottom:20px" >
                < input class = "easyui-textbox" name = "name"
                    style = "width:100%" data-options =
                    "label:'Name:',labelPosition:'top'" >
            </ div >
             
            < div class = "form-floating-label form-field"
                style = "margin-bottom:20px" >
                < input class = "easyui-textbox" name = "email"
                    style = "width:100%" data-options=
                    "label:'Email:',labelPosition:'top',
                    validType:'email'">
            </ div >
 
            < div class = "form-floating-label form-field"
                style = "margin-bottom:20px" >
                < input class = "easyui-textbox" name = "message"
                    style = "width:100%;min-height:100px"
                    data-options="label:'Message:',
                    labelPosition:'top',multiline:true">
            </ div >
        </ form >
        < div style = "text-align:center;padding:5px 0" >
            < a href = "javascript:void(0)"
                class = "easyui-linkbutton"
                onclick = "submitForm()" style = "width:80px" >
                Submit
            </ a >
             
            < a href = "javascript:void(0)"
                class = "easyui-linkbutton"
                onclick = "clearForm()" style = "width:80px" >
                Clear
            </ a >
        </ div >
    </ div >
 
    < script >
        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);
        }
    </ script >
 </ body >
 
</ html > 

Выход:

Перед вводом пользователем
После ввода пользователем

Пример 2: В следующем примере демонстрируется загрузка локальных и удаленных данных. Он также демонстрирует проверку формы пользователя с использованием библиотек инфраструктуры EasyUI. Используются те же классы, что и в приведенном выше примере. Класс, используемый для combobox, - easyui-combox . Обратитесь к выходному изображению или видео для лучшего понимания.

HTML

 <!DOCTYPE html>
 < html >
 
< head >
    < meta charset = "UTF-8" >
    < link rel = "stylesheet" type = "text/css"
        href = "themes/default/easyui.css" >
 
    < link rel = "stylesheet" type = "text/css"
        href = "themes/icon.css" >
 
    < link rel = "stylesheet" type = "text/css"
        href = "demo.css" >
 
    < script type = "text/javascript"
        src = "jquery.min.js" ></ script >
 
    < script type = "text/javascript"
        src = "jquery.easyui.min.js" ></ script >
 </ head >
 
< body >
    < h2 >Load Form Data using jEasyUI </ h2 >
 
    < p >Click to load data</ p >
 
    < div style = "margin:20px 0;" id = "loadDataDivID" >
        < a href = "javascript:void(0)"
            class = "easyui-linkbutton"
            onclick = "loadData()" >
            Load Data
        </ a >
         
        < a href = "javascript:void(0)"
            class = "easyui-linkbutton"
            onclick = "loadDataFromFile()" >
            Load Remote Data
        </ a >
         
        < a href = "javascript:void(0)"
            class = "easyui-linkbutton"
            onclick = "clearFormFields()" >
            Clear Form
        </ a >
    </ div >
 
    < div class = "easyui-panel" style="width:100%;
        max-width:400px;padding:30px 60px;">
 
        < form id = "formID" method = "post" >
            < div style = "margin-bottom:20px" >
                < input class = "easyui-textbox"
                    name = "name" style = "width:100%"
                    data-options="label:'Name:',
                    required:true">
            </ div >
 
            < div style = "margin-bottom:20px" >
                < input class = "easyui-textbox"
                    name = "email" style = "width:100%"
                    data-options="label:'Email:',
                    required:true,validType:'email'">
            </ div >
 
            < div style = "margin-bottom:20px" >
                < input class = "easyui-textbox"
                    name = "message" style = "width:100%;height:60px"
                    data-options = "label:'Message:',multiline:true" >
            </ div >
            < div style = "margin-bottom:20px" >
                < select class = "easyui-combobox" name = "language"
                    label = "Language" style = "width:100%" >
                     
                    < option value = "zh-cht" >Chinese</ option >
                    < option value = "nl" >Dutch</ option >
                    < option value = "en" selected = "selected" >
                        English
                    </ option >
                    < option value = "fr" >French</ option >
                    < option value = "de" >German</ option >
                    < option value = "hi" >Hindi</ option >
                    < option value = "id" >Indonesian</ option >
                    < option value = "it" >Italian</ option >
                    < option value = "ja" >Japanese</ option >
                    < option value = "ko" >Korean</ option >
                    < option value = "ru" >Russian</ option >
                    < option value = "es" >Spanish</ option >
                    < option value = "vi" >Vietnamese</ option >
                </ select >
            </ div >
            < div style = "margin-bottom:20px" >
                < label for = "accept" class = "textbox-label" >
                    Accept:
                </ label >
                 
                < input id = "acceptID" type = "checkbox"
                    name = "accept" value = "true" >
            </ div >
        </ form >
 
        < div style = "text-align:center;padding:5px 0" >
            < a href = "javascript:void(0)"
                class = "easyui-linkbutton"
                onclick = "submitFormData()"
                style = "width:80px" >
                Submit
            </ a >
 
        </ div >
    </ div >
    < script >
        function submitFormData() {
            $('#formID').form('submit', {
                onSubmit: function () {
                    return
                    $(this).form('enableValidation')
                            .form('validate');
                }
            });
        }
 
        function loadData() {
            $('#formID').form('load', {
                name: 'username',
                email: 'usermail@gmail.com',
                message: 'usermessage',
                language: 'en',
                accept: true
            });
        }
        function loadDataFromFile() {
            $('#formID').form('load', 'file_data.json');
        }
        function clearFormFields() {
            $('#formID').form('clear');
        }
    </ script >
 </ body >
 
</ html > 

file_data.json Ниже приведены данные JSON для файла «file_data.json», используемого в функции loadDataFromFile () указанного выше HTML-кода.

{
    "name": "Том",
    "электронная почта": "tom@gmail.com",    
    "message": "Сообщение Тома",
    "язык": "привет",
    "accept": "true"
}

Выход:

Перед нажатием кнопки:
После нажатия кнопки:
Проверка формы:

JQuery HTML HTML-Misc

Обработка форм с использованием EasyUI Framework

HTML

HTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ