EasyUIForm表单Demo_easyuidemo资源-CSDN下载

共6个文件

css：3个

js：2个

html：1个

easyui

form

validate

需积分: 10 109 浏览量 2018-08-02 17:30:06 上传评论收藏 142KB ZIP 举报

EasyUIForm表单Demo是一个基于EasyUI框架的交互式表单示例，它演示了如何在Web应用中创建、验证和处理用户输入的数据。EasyUI是一个基于jQuery的前端UI库，提供了一系列美观且易于使用的组件，如表格、对话框、菜单、按钮、表单等，用于快速构建现代化的管理界面。在EasyUIForm表单中，核心概念是使用EasyUI的form组件，它允许开发者定义各种表单元素，如文本输入框、选择框、复选框、日期选择器等。这些元素可以通过HTML标签和特定的属性进行配置，例如`<input type="text" class="easyui-validatebox" required>`就表示一个必填的文本输入框。表单验证是EasyUIForm中的关键功能，通过`validatebox`类和相关的验证规则，可以确保用户输入的数据满足预设的条件。例如，`required`属性表示该字段必须填写，`digits`则意味着输入的应该是数字。此外，还可以自定义验证规则，通过JavaScript函数实现复杂的业务逻辑验证。在EasyUIForm的实现中，会包含jQuery库，这是EasyUI的基础，负责DOM操作和事件处理。同时，CSS样式文件（如`easyui.css`）提供了表单及组件的外观样式，包括布局、颜色、字体等，确保表单与整个应用界面的一致性。为了使表单功能完整，开发者还需要理解EasyUI的事件模型，如`onSubmit`和`onSuccess`，这些事件可以绑定到表单上，以便在用户提交表单时执行相应的处理。`onSubmit`通常用于在提交前进行最后的验证，而`onSuccess`则是在服务器响应成功后执行的操作，比如刷新页面或显示提示信息。压缩包`easyuiForm`可能包含以下文件： 1. `index.html`: 主页文件，包含了表单的HTML结构以及EasyUI的相关引用。 2. `jquery.js` / `jquery.min.js`: jQuery的核心库。 3. `easyui.css` / `easyui.min.css`: EasyUI的样式文件。 4. `easyui.js` / `easyui.min.js`: EasyUI的主要JavaScript文件。 5. `locale/easyui-lang-zh_CN.js`: 中文语言包，用于显示EasyUI组件的语言文字。 6. 可能还有其他JavaScript文件，用于表单的验证规则和业务逻辑。在实际开发中，开发者需要根据项目需求调整表单元素、验证规则和事件处理，以实现定制化的功能。EasyUIForm表单Demo提供了一个基础模板，帮助开发者快速入门，理解EasyUI在表单处理上的用法，从而提高开发效率。通过深入学习和实践，开发者可以利用EasyUI构建出高效、美观且功能强大的Web应用表单。

资源推荐

资源详情

资源评论

收起资源包目录

easyuiForm.zip （6个子文件）

easyuiForm

css

icon.css 2KB

demo.css 388B

easyui.css 70KB

jquery.min.js 95KB

jquery.easyui.min.js 426KB

easyuiForm.html 3KB

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Form - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="css/easyui.css"> <link rel="stylesheet" type="text/css" href="css/icon.css"> <link rel="stylesheet" type="text/css" href="css/demo.css"> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.easyui.min.js"></script> </head> <body> <h2>EasyUI Form</h2> <div style="margin:20px 0;"></div> <div class="easyui-panel" title="标题" style="width:100%;max-width:400px;padding:30px 60px;"> <form id="ff" 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="subject" style="width:100%" data-options="label:'Subject:',required:true"> </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="ar">Arabic</option><option value="bg">Bulgarian</option><option value="ca">Catalan</option><option value="zh-cht">Chinese Traditional</option><option value="cs">Czech</option><option value="da">Danish</option><option value="nl">Dutch</option><option value="en" selected="selected">English</option><option value="et">Estonian</option><option value="fi">Finnish</option><option value="fr">French</option><option value="de">German</option><option value="el">Greek</option><option value="ht">Haitian Creole</option><option value="he">Hebrew</option><option value="hi">Hindi</option><option value="mww">Hmong Daw</option><option value="hu">Hungarian</option><option value="id">Indonesian</option><option value="it">Italian</option><option value="ja">Japanese</option><option value="ko">Korean</option><option value="lv">Latvian</option><option value="lt">Lithuanian</option><option value="no">Norwegian</option><option value="fa">Persian</option><option value="pl">Polish</option><option value="pt">Portuguese</option><option value="ro">Romanian</option><option value="ru">Russian</option><option value="sk">Slovak</option><option value="sl">Slovenian</option><option value="es">Spanish</option><option value="sv">Swedish</option><option value="th">Thai</option><option value="tr">Turkish</option><option value="uk">Ukrainian</option><option value="vi">Vietnamese</option></select> </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(){ //表单校验 var v = $("#ff").form("validate"); if(!v){ return; } $('#ff').form('submit'); } function clearForm(){ $('#ff').form('clear'); } </script> </body> </html>

评论收藏

内容反馈