Как загрузить и проверить данные формы с помощью jQuery EasyUI?
Опубликовано: 5 Января, 2022
EasyUI - это платформа HTML5 для использования компонентов пользовательского интерфейса на основе технологий jQuery, React, Angular и Vue. Это помогает создавать функции для интерактивных веб-приложений и мобильных приложений, экономя много времени для разработчиков. Это помогает создавать функции для интерактивных веб-приложений и мобильных приложений, экономя много времени для разработчиков.
Загрузите все необходимые предварительно скомпилированные файлы с официального сайта и сохраните в своей рабочей папке. Пожалуйста, позаботьтесь о правильных путях к файлам во время реализации кода.
Официальный сайт jQuery EasyUI:
https://www.jeasyui.com/index.php
Пример 1. Следующий код демонстрирует дизайн базовой пользовательской формы с использованием инфраструктуры jQuery EasyUI .
HTML
<!doctype html>< html > < head > < meta charset = "UTF-8" > < meta name = "viewport" content=" initial-scale = 1 .0, maximum-scale = 1 .0, user-scalable = no "> <!-- EasyUI specific stylesheets--> < link rel = "stylesheet" type = "text/css" href = "themes/metro/easyui.css" > < link rel = "stylesheet" type = "text/css" href = "demo.css" > < link rel = "stylesheet" type = "text/css" href = "themes/icon.css" > <!--jQuery library --> < script type = "text/javascript" src = "jquery.min.js" > </ script > <!--jQuery libraries of EasyUI --> < script type = "text/javascript" src = "jquery.easyui.min.js" > </ script ></ head > < body > < h2 >jQuery EasyUI basic user form</ h2 > < div class = "easyui-panel" style = "width:100%;max-width:400px;padding:30px 60px;" > < form id = "formID" method = "post" > <!-- Set class to form-floating-label for special labels--> < div class = "form-floating-label form-field" style = "margin-bottom:20px" > <!-- easyui-textbox class is used --> < input class = "easyui-textbox" name = "name" style = "width:100%" data-options="label:'Name:', required:true, labelPosition:'top'"> </ div > <!-- set the data-options for HTML validation --> < div class = "form-floating-label form-field" style = "margin-bottom:20px" > < input class = "easyui-textbox" name = "email" style = "width:100%" data-options="label:'Email ID:', required:true,validType:'email', labelPosition:'top'"> </ div > < div class = "form-floating-label form-field" style = "margin-bottom:20px" > <!--set multiline to true for textarea--> < input class = "easyui-textbox" name = "message" style = "width:100%;height:60px" data-options="label:'Message:', multiline:true, labelPosition:'top'"> </ div > < div class = "form-floating-label form-field" style = "margin-bottom:20px" > < select class = "easyui-combobox" name = "language" style = "width:100%" data-options="label:'Language:', labelPosition:'top'"> < option value = "ar" >Arabic</ 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 = "el" >Greek</ option > < option value = "hi" >Hindi</ option > < option value = "ja" >Japanese</ option > < option value = "ko" >Korean</ option > </ select > </ div > </ form > < div style = "text-align:center;padding:5px 0" > <!--To create link using EasyUI --> < 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" > Reset </ a > </ div > </ div > < script > // Submit the form function submitForm(){ $('#formID').form('submit'); } // Reset the form function clearForm(){ $('#formID').form('clear'); } </ script ></ body > </ html > |
Выход:
- Перед казнью:
- После казни:
Пример 2: Следующий код демонстрирует загрузку данных формы из текущего локального файла и удаленного файла JSON.
HTML
<!doctype html>< html >< head > < meta charset = "UTF-8" > < meta name = "viewport" content=" initial-scale = 1 .0, maximum-scale = 1 .0, user-scalable = no "> <!-- EasyUI specific stylesheets--> < link rel = "stylesheet" type = "text/css" href = "themes/metro/easyui.css" > < link rel = "stylesheet" type = "text/css" href = "demo.css" > < link rel = "stylesheet" type = "text/css" href = "themes/icon.css" > <!--jQuery library --> < script type = "text/javascript" src = "jquery.min.js" > </ script > <!--jQuery libraries of EasyUI --> < script type = "text/javascript" src = "jquery.easyui.min.js" > </ script ></ head > < body > < h2 > jQuery EasyUI load user form data </ h2 > < div class = "easyui-panel" style="width:100%;max-width:400px; padding:30px 60px;"> < form id = "formID" method = "post" > <!--Set class to form-floating-label for special labels--> < div class = "form-floating-label form-field" style = "margin-bottom:20px" > <!--easyui-textbox class is used--> < input class = "easyui-textbox" name = "name" style = "width:100%" data-options="label:'Name:', required:true,labelPosition:'top'"> </ div > <!--set the data-options for HTML validation --> < div class = "form-floating-label form-field" style = "margin-bottom:20px" > < input class = "easyui-textbox" name = "email" style = "width:100%" data-options="label:'Email ID:', required:true,validType:'email', labelPosition:'top'"> </ div > < div class = "form-floating-label form-field" style = "margin-bottom:20px" > <!--set multiline to true for textarea--> < input class = "easyui-textbox" name = "message" style = "width:100%;height:60px" data-options="label:'Message:',multiline:true, labelPosition:'top'"> </ div > < div class = "form-floating-label form-field" style = "margin-bottom:20px" > < select class = "easyui-combobox" name = "language" style = "width:100%" data-options="label:'Language:', labelPosition:'top'"> < option value = "ar" >Arabic</ 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 = "el" >Greek</ option > < option value = "hi" >Hindi</ option > < option value = "ja" >Japanese</ option > < option value = "ko" >Korean</ option > </ select > </ div > </ form > < div style = "text-align:center;padding:5px 0" > <!-- To create link using EasyUI --> < a href = "javascript:void(0)" class = "easyui-linkbutton" onclick = "clearForm()" > Reset </ a > < a href = "javascript:void(0)" class = "easyui-linkbutton" onclick = "loadData()" > Load Data </ a > < a href = "javascript:void(0)" class = "easyui-linkbutton" onclick = "loadRemoteData()" > LoadRemote </ a > </ div > </ div > < script > // Reset the form function clearForm(){ $('#formID').form('clear'); } // Load data function loadData(){ $('#formID').form('load',{ name:'Sahil', email:'sahil@gmail.com', message:'hello GFG', language:'en' }); } // Load remote json file data function loadRemoteData(){ $('#formID').form('load','form-data.json'); } </ script ></ body > </ html > |
form-data.json: Ниже приведены данные для файла form-data.json, который используется в приведенном выше коде.
{
"name": "sandeep",
"электронная почта": "sandeep@gmail.com",
"message": "Привет, GFG",
"язык": "привет"
}Выход:
Пример 3: В следующем коде показано, как включить проверку с помощью подключаемого модуля jQuery EasyUI.
HTML
<!doctype html>< html >< head > < meta charset = "UTF-8" > < meta name = "viewport" content=" initial-scale = 1 .0, maximum-scale = 1 .0, user-scalable = no "> <!-- EasyUI specific stylesheets--> < link rel = "stylesheet" type = "text/css" href = "themes/metro/easyui.css" > < link rel = "stylesheet" type = "text/css" href = "demo.css" > < link rel = "stylesheet" type = "text/css" href = "themes/icon.css" > <!--jQuery library --> < script type = "text/javascript" src = "jquery.min.js" > </ script > <!--jQuery libraries of EasyUI --> < script type = "text/javascript" src = "jquery.easyui.min.js" > </ script ></ head > < body > < h2 > jQuery EasyUI load user form data </ h2 > < div class = "easyui-panel" style = "width:100%;max-width:400px;padding:30px 60px;" > <!--set novalidate to true in data-options--> < form id = "formID" method = "post" data-options = "novalidate:true" > <!--set class to form-floating-label for special labels--> < div class = "form-floating-label form-field" style = "margin-bottom:20px" > <!--easyui-textbox class is used --> < input class = "easyui-textbox" РЕКОМЕНДУЕМЫЕ СТАТЬИ |