EasyUI之表单Form

最新推荐文章于 2024-04-17 10:24:02 发布
最新推荐文章于 2024-04-17 10:24:02 发布
阅读量4.8k 收藏 6
点赞数
分类专栏： JQuery 文章标签： easyui jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/you23hai45/article/details/52961271
版权

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）点击清空


翱翔天地
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
EasyUI中实现form表单提交的示例分享
09-03
里给大家分享的是一段使用EasyUI中实现form表单提交的方法的核心代码，小伙伴们根据自己的需求补全form部分吧，希望大家能够喜欢。
EASYUI 表单(FORM)用法
taxuewuhen1031的博客
08-16 1792
1，ajax提交只是简单的异步和文本提交。提交的数据需要序列化或程序指定。同时，数据也需要自己验证。如果使用easyui的验证组件validatebox，则需要在提交前调用，如下：      if ($("#formname").form("validate")){           $.ajax(......)      } 2，easyui的form提交也可以实现无刷新提交，
easyUI之dialog控件和form控件的使用，成功入职阿里月薪45K
m0_60750088的博客
03-18 780
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》[外链图片转存中…(img-THmHAVGv-1710768520717)]
easyui_快速入门04
m0_67888923的博客
05-07 215
文章目录 一、DataGrid 二、DataGrid 三、DataGrid事件 四、DataGrid分页 一、DataGrid 概述： 扩展自$.fn.panel.defaults。使用$.fn.datagrid.defaults重写默认值对象。 DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只...
jQuery EasyUI之Form表单提交
热门推荐
崔向阳@李晓的博客
04-24 1万+
Form 表单   用法 1.   id="ff" method="post">   2.      ...    3.     使 form 成为 ajax 提交的 form 。 1.  $('#ff').form({    2.      url:...,    3.      onSubmit: function(){    4.          /
【EasyUI篇】Form表单组件
ouYang的博客
09-26 4434
微信公众号：程序yuan 关注可获得更多资源。问题或建议，请公众号留言; 查看--&gt; 全套EasyUI示例目录 27.Form表单组件 Controller文件 @RequestMapping(value = "/validateUser") @ResponseBody public String validateUser(String name, String...
Easyui Form表单提交
Fanbin168的专栏
11-21 7008
1 Index2 用户名： 密 码： abc $(function () { //如果写了这个form 点击提交的时候就不会提交到123.html了。而是提交到这个异步里的url方法中去了 //$
EASYUI 表单(FORM)用法
weixin_34403693的博客
09-23 193
http://blog.sina.com.cn/s/blog_3ecf39a70102ux8x.html 1，ajax提交只是简单的异步和文本提交。提交的数据需要序列化或程序指定。同时，数据也需要自己验证。如果使用easyui的验证组件validatebox，则需要在提交前调用，如下：      if ($("#formname").form("validate")){           ...
使用easyui框架中的from表单设置数字默认值和日期默认值
凌枫ozo的博客
04-26 1489
我们一般使用普通的form表单，可以直接用value属性就能显示默认值，但是easyui框架这样直接设置value属性的值没用 <input type="text" name="money" value="100000" readonly="readonly" size="50px" style="width: 84%;"/> 还需要使用如下代码给easyui-numbox赋值才...
（三）EasyUI 使用——form表单1
weixin_34185320的博客
05-10 214
form表单组件主要有以下内容（如下图）     　　 　　　　　　　　　　 1. validatebox验证框  　　　　　　　　　　   姓名：必填/1-4个字符/必填中文   邮箱：必填/1-30个字符/必填符合邮箱格式/后缀必须是com或cn   密码验证： &lt;div style="margin:100px"&gt;&lt;/div&gt; 用户名:&am...
Jquery Easyui表单组件Form使用详解（30）
10-20
主要为大家详细介绍了Jquery Easyui表单组件Form的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jquery插件EasyUI中form表单提交实例分享
10-23
主要介绍了jquery插件EasyUI中form表单提交实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jQuery EasyUI API 中文文档 - Form表单
10-28
jQuery EasyUI API 中文文档 - Form表单,使用jQuery EasyUI的朋友可以参考下。
EasyUI中在表单提交之前进行验证
09-02
主要介绍了EasyUI中在表单提交之前进行验证的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
【AI 测试】分词器
weixin_48134870的博客
04-17 1052
总之，分词器在自然语言处理的多个领域中都发挥着重要作用，它能够将连续的文本数据转化为计算机可以处理的数字表示，为后续的任务提供必要的支持。例如，你可以根据分词器的性能在融合时给不同的分词器分配不同的权重，或者使用更复杂的算法来结合多个分词器的结果。最后，如果你的任务对分词性能有严格要求，建议对多个分词器进行详细的比较和评估，选择最适合你任务需求的分词器，并在必要时结合多个分词器的优势来提高分词效果。需要注意的是，不同的分词器适用于不同的语言和处理任务，因此在实际应用中需要根据具体需求选择合适的分词器。
实验-三、数据库安全性(目的、要求和模板).doc
04-24
实验-三、数据库安全性(目的、要求和模板).doc
基于Docker搭建K8s集群离线包
04-24
基于Docker搭建K8s集群离线包，包含部署时所需的全部文件，可在内网环境中使用，K8s为1.23.0版本，docker为20.10.9-3版本
基于springboot+vue实现的求职招聘类型网站源代码+数据库（优质毕设项目）.zip
最新发布
04-24
基于springboot+vue实现的求职招聘类型网站源代码+数据库（优质毕设项目）.zip个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试，确保可以运行！ 基于springboot+vue实现的求职招聘类型网站源代码+数据库（优质毕设项目）.zip个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试，确保可以运行！ 基于springboot+vue实现的求职招聘类型网站源代码+数据库（优质毕设项目）.zip个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试，确保可以运行！基于springboot+vue实现的求
easyui 动态生成form表单
05-18
使用 EasyUI 动态生成表单可以通过以下步骤实现： 1. 定义一个容器，例如 `<div id="formContainer"></div>`。 2. 使用 jQuery 创建一个表单元素，并设置其属性和样式。例如： ``` var $form = $("<form></form>"); $form.attr("id", "dynamicForm"); $form.attr("method", "post"); $form.attr("action", "save.php"); $form.addClass("easyui-form"); $form.appendTo("#formContainer"); ``` 3. 创建需要添加到表单中的表单元素，例如 input、select 等。 4. 将创建的表单元素添加到动态表单中。例如： ``` var $input = $("<input></input>"); $input.attr("type", "text"); $input.attr("id", "username"); $input.attr("name", "username"); $input.appendTo($form); ``` 5. 最后，使用 EasyUI 的 `$.parser.parse()` 方法对动态表单进行初始化，以便 EasyUI 样式和行为正确应用到表单上。例如： ``` $.parser.parse("#dynamicForm"); ``` 完整示例代码如下： ``` <div id="formContainer"></div> <script> var $form = $("<form></form>"); $form.attr("id", "dynamicForm"); $form.attr("method", "post"); $form.attr("action", "save.php"); $form.addClass("easyui-form"); $form.appendTo("#formContainer"); var $input = $("<input></input>"); $input.attr("type", "text"); $input.attr("id", "username"); $input.attr("name", "username"); $input.appendTo($form); var $select = $("<select></select>"); $select.attr("id", "gender"); $select.attr("name", "gender"); var $option1 = $("<option></option>"); $option1.attr("value", "male"); $option1.text("Male"); var $option2 = $("<option></option>"); $option2.attr("value", "female"); $option2.text("Female"); $select.append($option1); $select.append($option2); $select.appendTo($form); $.parser.parse("#dynamicForm"); </script> ``` 注意，动态表单中的表单元素需要按照 EasyUI 的规则设置 id 和 name 属性，以便 EasyUI 能够正确处理表单数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值