1、实例背景
EasyUI常用的Form表单，利用输入框直接提交值；清空按钮，将填写有误的数据进行清空
2、实例源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EasyUI之表单Form</title>
<link rel="stylesheet" href="../themes/black/easyui.css" />
<link rel="stylesheet" href="../themes/icon.css" />
<link rel="stylesheet" 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>
<script>
$(document).ready(function(){
//提交事件
$("#submitBtn").click(function(){
$(this).form("submit");
});
//重置事件
$("#resetBtn").click(function(){
$(this).form("clear");
});
});
</script>
</head>
<body>
<div class="easyui-panel" title="发送邮件" style="width:400px">
<div style="padding:10px 60px 20px 60px">
<form id="ff" method="post">
<table cellpadding="5">
<tr>
<td>用户名:</td>
<td><input class="easyui-textbox" type="text" name="name" data-options="required:true"></input></td>
</tr>
<tr>
<td>电子邮件:</td>
<td><input class="easyui-textbox" type="text" name="email" data-options="required:true,validType:'email'"></input></td>
</tr>
<tr>
<td>主题:</td>
<td><input class="easyui-textbox" type="text" name="subject" data-options="required:true"></input></td>
</tr>
<tr>
<td>消息:</td>
<td><input class="easyui-textbox" name="message" data-options="multiline:true" style="height:100px"></input></td>
</tr>
<tr>
<td>语言:</td>
<td>
<select class="easyui-combobox" name="language" style="width: 172px;">
<option value="1">中文简体</option>
<option value="2">中文繁体</option>
<option value="3">英语</option>
</select>
</td>
</tr>
</table>
</form>
<div style="text-align:center;padding:5px">
<a href="javascript:void(0)" class="easyui-linkbutton" id="submitBtn" style="width: 100px;">提交</a>
<a href="javascript:void(0)" class="easyui-linkbutton" id="resetBtn" style="width: 100px;">清空</a>
</div>
</div>
</div>
</body>
</html>
3、实例结果
（1）点击提交
![]()
（2）点击清空
![]()
分享到：
相关推荐
easyUI页面datagrid动态列和form字段动态添加；项目开发时用到的，废了不少事，大概总了一下，现在发出来共享给想我一样的要用到的菜鸟们，谢谢
由于EasyUI自带的Form提交方式会自动去除掉readonly和disabled的值，或者多层form时，不能正确获取到form表单中的数据，由此，产生了这个专门针对EasyUI form的提交工具。
希望以上内容对大家学习和使用JQuery Easyui表单组件Form有所帮助，如果有进一步的疑问或需要深入学习，建议查阅JQuery Easyui的官方文档和相关社区资源，那里会有更多详细的示例和高级用法。同时，也希望大家支持...
在本文中，我们将深入探讨如何在EasyUI框架中实现form表单的提交。EasyUI是一个基于jQuery的前端组件库，它提供了一系列易于使用的界面组件，包括表格、对话框、菜单等，大大简化了Web应用的开发。对于表单提交，...
在EasyUIForm表单中，核心概念是使用EasyUI的form组件，它允许开发者定义各种表单元素，如文本输入框、选择框、复选框、日期选择器等。这些元素可以通过HTML标签和特定的属性进行配置，例如`...
在使用EasyUI开发Web应用程序时，表单验证是确保数据质量的重要步骤。EasyUI提供了一种简洁的方法来在客户端执行这种验证，以便在用户尝试提交表单之前检查输入的有效性。下面将详细介绍如何在EasyUI中实现表单提交...
### EasyUI表单提交实例解析 在Web开发中，表单提交是一种常见的与后端交互的方式。使用jQuery插件EasyUI可以简化表单的创建和提交过程。本文将详细介绍如何在EasyUI环境中创建一个表单，并通过实例展示如何提交...
在"jQuery EasyUI 扩展(tip和form)"这个主题中，我们将深入探讨如何利用 EasyUI 的扩展功能来优化提示（tip）和表单（form）的交互体验。 首先，让我们谈谈“Tip”。在 Web 开发中，提示信息通常用于向用户提供即时...
通过使用 easyui 表单（form）插件来改变表单（form）为 ajax 表单（form）。表单（form）提交所有字段到后台服务器，服务器处理和发送一些数据返回到前端页面。我们接收返回数据，并将它显示出来。 创建表单（Form...
jQuery EasyUI是一个基于jQuery的前端框架，它提供了一套易于使用的UI组件，可以让开发者快速构建出丰富的交互式网页...对于使用jQuery EasyUI的朋友来说，掌握Form表单的使用是构建交互式网页界面不可或缺的技能之一。
然而，在实际操作中，我们可能会遇到`easyui form validate`方法总是返回`false`的问题，这可能导致表单无法正常提交。本文将深入探讨这个问题的原因并提供相应的解决方案。 ### 问题分析 1. **类库冲突**： 问题...
在"bootstrap easyui表单拖拽各种方法"这个主题中，我们将探讨如何利用Bootstrap EasyUI实现表单元素的拖放功能，以增强用户体验和交互性。 1. **EasyUI Draggable**: EasyUI 提供了 `draggable` 插件，可以将任何...
使用EasyUi我们可以在客户端表单提交之前进行验证，过程如下：只需在onSubmit的时候使用return $(“#form1”).form(‘validate’)方法即可，EasyUi中form模块中的from(‘validate’)方法会自行对我们指定的表单中...
在标题和描述中提到的“Jquery组件easyUi实现表单验证”，主要是指使用EasyUI的表单组件和验证功能。下面我们将详细介绍如何使用EasyUI实现表单验证。 首先，我们需要引入EasyUI的相关CSS和JavaScript文件，如在...
将form表单内容转换为json将form表单内容转换为json将form表单内容转换为json
要使这个表单支持 AJAX 提交，你需要使用 jQuery EasyUI 的 `form` 插件。首先，引入 jQuery 和 jQuery EasyUI 的 CSS 与 JS 文件，然后应用如下 JavaScript 代码： ```javascript $(function() { $('#ff').form({ ...
在表单处理方面，EasyUI 提供了`form`组件，它可以自动处理表单的提交和验证。例如，我们可以通过`$('#formId').form('validate')`来验证表单数据，如果所有字段都符合规则，该方法将返回`true`。此外，`datagrid`...
利用EasyUI的表单（form）、下拉选择（combobox）、时间选择器（datetimepicker）等组件，开发者可以构建出功能丰富的云服务管理界面。 在使用这些模板时，开发者需要注意适配不同环境，如浏览器兼容性、数据安全和...