java_easyui体系之form

最新推荐文章于 2024-04-15 05:55:24 发布
最新推荐文章于 2024-04-15 05:55:24 发布
阅读量2.5k 收藏 2
点赞数 1
分类专栏： Oscar_web 文章标签： easyui form jquery form表单提交
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/crave_shy/article/details/17784011
版权

java_easyui体系之form


摘要：简单介绍form的提交方式、与validatebox的结合使用。

一：form简介


         Easyui中的form有两种提交方式、结合自己新添加的一种ajax提交方式、本文简单说明form的三种提交方式、和结合validatebox使用来校验基本信息。

 

二：form提交


         以登录为例：下面是登录页面、注意要导入easyui所需要的css和js。

要引入的css+js：


	<link rel="stylesheet" type="text/css" href="css/easyui/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="css/easyui/icon.css">
    <link rel="stylesheet" type="text/css" href="css/easyui/demo.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>

        登录的div和表单：


  		<div id="loginAndregist" title="用户登录" style="width:300px;height:200px;">  
  			<form id="loginInputForm" method="post" action="logion_login.action">
	  			<table>
	  				<tr>
	  					<th align="right">username: </th>
	  					<td><input type="text" class="easyui-validatebox"  required="true" name="username"/></td>
	  				</tr>
	  				<tr>
	  					<th align="right">password: </th>
	  					<td><input type="text" class="easyui-validatebox"  required="true" name="password"/></td>
	  				</tr>
	  			</table>
  			</form>
		</div>

简单说明：

1、登录是使用dialog来作为界面的、初始化dialog有几种方式——（1）使用class="easyui-dialog"定义、使用data-options="xxx"来定义dialog属性、这种适合只具有基本样式、不具有与后台交互功能的时候的页面使用。（2）使用js初始化、适合与后台交互的界面使用、（3）可以混合使用。


1、通过ajax提交：


    		loginAndregist = $('#loginAndregist').dialog({
    			closable:false,
    			modal:true,
    			draggable:false,
    			buttons:[{
    				text:'注册',
    				handler:function(){
    					$('#regist').dialog('open');
    				}
    			},{
    				text:'登录',
    				handler:function(){
    					if( $('#loginInputForm').form('validate')){
	    					$.ajax({
	    						url:'login_login.action',
	    						data:$('#loginInputForm').serialize(),
	    						cache:false,
	    						dataType:'text',
	    						success:function(r){
	    							console.info(r);
	    							if(r == "success"){
	    								$('#loginAndregist').dialog('close');
	    								$.messager.show({
	    									title : '提示',
	    									msg : '登录成功'
	    								});
	    							}else{
	    								$.messager.alert('标题','用户名密码错误');	
	    							}
	    						}
	    					});
    					}
    				}
    			}],
    		});

简单说明：if( $('#loginInputForm').form('validate')){...}是将form与其内部的validatebox绑定、可以使用validatebox提供的校验规则来校验输入。若不使用这个而直接使用ajax提交、则不会使用validatebox提供的校验规则、当然也可以自己加校验方式、onSubmit()。

2、通过先初始化form、再在点击登录触发函数中提交


 初始化form表单：

    		//初始化登录表单
    		loginInputForm = $('#loginInputForm').form({
    			url:'login_login.action',
    			success:function(r){
					console.info(r);
					if(r == "success"){
						$('#loginAndregist').dialog('close');
						$.messager.show({
							title : '提示',
							msg : '登录成功'
						});
					}else{
						$.messager.alert('标题','用户名密码错误');	
					}
				}
    		});


点击登录时提交表单：


    		loginAndregist = $('#loginAndregist').dialog({
    			closable:false,
    			modal:true,
    			draggable:false,
    			buttons:[{
    				text:'注册',
    				handler:function(){
    					$('#regist').dialog('open');
    				}
    			},{
    				text:'登录',
    				handler:function(){
    					loginInputForm.submit();
    				}
    			}],
    		});

简单说明：这里不再需要像ajax一样添加一个校验的if、因为这种方式的form是与validatebox绑定的、会自动校验。


3、直接在点击登录触发函数中提交


    		loginAndregist = $('#loginAndregist').dialog({
    			closable:false,
    			modal:true,
    			draggable:false,
    			buttons:[{
    				text:'注册',
    				handler:function(){
    					$('#regist').dialog('open');
    				}
    			},{
    				text:'登录',
    				handler:function(){
    					if( $('#loginInputForm').form('validate')){
    						$('#loginInputForm').form('submit',{
       						 url:'login_login.action',
       						 onSubmit: function(){  
       							 console.info('do some check !');
       						  },
      			    			  success : function(r){
      			    				console.info(r);
      			    				console.info(r);
	    							if(r == "success"){
	    								$('#loginAndregist').dialog('close');
	    								$.messager.show({
	    									title : '提示',
	    									msg : '登录成功'
	    								});
	    							}else{
	    								$.messager.alert('标题','用户名密码错误');	
	    							}
      			    			 }
       					 	});
    					}
    				}
    			}],
    		});
$('#loginInputForm').form('submit',{...})、当点击登录按钮时会直接提交表单、红色部分可以对表单提交之前做一些操作、比如校验。

三：form注意事项


     注意获取对象的不同、显示隐藏的时候、获取的是包含form表单的div、提交的是form。两者千万不要弄混了、所以使用jquery获取这两个节点时要注意id的区别、
    1、获取div的id用于将div初始化成dialog： $('#divId').dialog(...);
    2、获取div中的form的id用于初始化form表单： $('#formId').form(...);
    3、三种提交表单方式：（1）在div中使用ajax提交、（2）将初始化好的表单提交： $('#formId').form().submit();（3）在登录按钮触发函数中$('#formId').form('submit',{xxx})
   

四：form提交网页完整（包括注册）

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>login</title>

	<link rel="stylesheet" type="text/css" href="css/easyui/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="css/easyui/icon.css">
    <link rel="stylesheet" type="text/css" href="css/easyui/demo.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
    <script type="text/javascript">
    	/*
    		注意获取对象的不同、显示隐藏的时候、获取的是包含form表单的div、提交的是form。两者千万不要弄混了、所以使用jquery获取这两个节点时要注意id的区别、
    		1、获取div的id用于将div初始化成dialog： 		$('#divId').dialog(...);
    		2、获取div中的form的id用于初始化form表单：	$('#formId').form(...);
    		3、三种提交表单方式：（1）在div中使用ajax提交、（2）将初始化好的表单提交：	$('#formId').form().submit();（3）在登录按钮触发函数中$('#formId').form('submit',{xxx})
    	*/
    
    	//节点的引用、当被初始化一次之后、后面就可以直接拿来使用了
    	var loginAndregist;
    	var loginInputForm;
    	var registForm;
    	$(function(){
    		//初始化登录窗口
    		loginAndregist = $('#loginAndregist').dialog({
    			closable:false,
    			modal:true,
    			draggable:false,
    			buttons:[{
    				text:'注册',
    				handler:function(){
    					$('#regist').dialog('open');
    				}
    			},{
    				text:'登录',
    				handler:function(){
    					//loginInputForm.submit();
    					
    					if( $('#loginInputForm').form('validate')){
	    					$.ajax({
	    						url:'login_login.action',
	    						data:$('#loginInputForm').serialize(),
	    						cache:false,
	    						dataType:'text',
	    						success:function(r){
	    							console.info(r);
	    							if(r == "success"){
	    								$('#loginAndregist').dialog('close');
	    								$.messager.show({
	    									title : '提示',
	    									msg : '登录成功'
	    								});
	    							}else{
	    								$.messager.alert('标题','用户名密码错误');	
	    							}
	    						}
	    					});
    					}
    					/*
    					if( $('#loginInputForm').form('validate')){
    						$('#loginInputForm').form('submit',{
       						 url:'login_login.action',
       						 onSubmit: function(){  
       							 console.info('do some check !');
       						  },
      			    			  success : function(r){
      			    				console.info(r);
      			    				console.info(r);
	    							if(r == "success"){
	    								$('#loginAndregist').dialog('close');
	    								$.messager.show({
	    									title : '提示',
	    									msg : '登录成功'
	    								});
	    							}else{
	    								$.messager.alert('标题','用户名密码错误');	
	    							}
      			    			 }
       					 	});
    					}*/
    				}
    			}],
    		});
    		//初始化登录表单
    		loginInputForm = $('#loginInputForm').form({
    			url:'login_login.action',
    			success:function(r){
					console.info(r);
					if(r == "success"){
						$('#loginAndregist').dialog('close');
						$.messager.show({
							title : '提示',
							msg : '登录成功'
						});
					}else{
						$.messager.alert('标题','用户名密码错误');	
					}
				}
    		});
    		
    		//初始化注册窗口
    		$('#regist').show().dialog({
    			modal:true,
    			closed:true,
    			draggable:true,
    			buttons:[{
    				text:'确认',
    				handler:function(){
    					$('#registForm').submit();
    				}
    			},{
    				text:'取消',
    				handler:function(){
    					$('#regist').dialog('close');
    				}
    			}],
    		});
    		
    		//初始化注册表单
    		registForm = $('#registForm').form({
    			url:'login_regist.action',
    			success : function(r){
    				console.info(r);
    				if(r == "success"){
    					$('#regist').dialog('close');
    					$.messager.show({
    						title : '提示',
    						msg : '注册成功'
    					});
    				}else{
						$.messager.show({
							title : '警告',
							msg : '注册失败'
						});  					
    				}
    			}
    		});
    	});
    </script>
  </head>
  
  <body>
  		<div id="loginAndregist" title="用户登录" style="width:300px;height:200px;">  
  			<form id="loginInputForm" method="post" action="logion_login.action">
	  			<table>
	  				<tr>
	  					<th align="right">username: </th>
	  					<td><input type="text" class="easyui-validatebox"  required="true" name="username"/></td>
	  				</tr>
	  				<tr>
	  					<th align="right">password: </th>
	  					<td><input type="text" class="easyui-validatebox"  required="true" name="password"/></td>
	  				</tr>
	  			</table>
  			</form>
		</div>
		
		<div id="regist" title="用户注册" style="width:300px;height:200px;display: none;">  
  			<form id="registForm" method="post" action="logion_regist.action">
	  			<table>
	  				<tr>
	  					<th align="right">username: </th>
	  					<td><input type="text" class="easyui-validatebox"  required="true" name="username"/></td>
	  				</tr>
	  				<tr>
	  					<th align="right">password: </th>
	  					<td><input type="text" class="easyui-validatebox"  required="true" name="password"/></td>
	  				</tr>
	  				<tr>
	  					<th align="right">confirmpassword: </th>
	  					<td><input type="text" class="easyui-validatebox"  required="true" name="confirmpassword"/></td>
	  				</tr>
	  			</table>
  			</form>
		</div>
  </body>
</html>

更多内容 ： java_easyui体系之目录——00


huaying.chen
关注
专栏目录
EasyUI Jquery 学习笔记 —— Form（表单）详细版
cccloveforever的博客
04-09 1639
微调器（spinner）是创建其他微调器组件（比如：数值微调器 numberspinner、时间微调器 timespinner，等等）的基础组件。时间微调器（timespinner）是基于微调器（spinner）创建的。密码框会通过显示圆点的方式来保护您输入的密码文本，同时输入框中会提供一个眼睛的图标来通过点击的动作查看您输入的密码，来确保您输入的密码正确无误。与日期框（datebox）相似，日期时间框（datetimebox）允许用户选择要显示的带有指定格式的日期和时间的日期和时间。
干货整理，EasyUI之表单验证(1)
最新发布
2401_84003771的博客
04-19 687
有些时候我们需要同服务器交互验证，此时easyUI验证也提供的有此功能，remote[‘http://…/action.do’,‘paramName’]：发送 ajax 请求来验证值，成功时返回 ‘true’。官方所提供的验证类型就那么几种并不能满足我们所有的验证需求，所以此时我们需要自定义验证规则。style=“width:100%” data-options=“label:‘账号:’,required:true,invalidMessage:‘账号已存在！
EASYUI 表单(FORM)用法
weixin_34403693的博客
09-23 214
http://blog.sina.com.cn/s/blog_3ecf39a70102ux8x.html 1，ajax提交只是简单的异步和文本提交。提交的数据需要序列化或程序指定。同时，数据也需要自己验证。如果使用easyui的验证组件validatebox，则需要在提交前调用，如下：      if ($("#formname").form("validate")){           ...
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.          /
JAVA编码（58）—— SpringMvc+easyui文件上传（Ajax提交form表单形式）
weixin_30807779的博客
01-31 119
<!-- 上传文件 --> <div id="uploadFiles" class="easyui-dialog" style="width: 500px; height: 200px; padding: 10px 20px" closed="true" align="center" data-options="modal:true,closed:t...
【连载】研究EasyUI系统——Form组件
来啊，相互伤害啊
08-15 1698
在html标准中，form标签作为表单元素，作用是将表单内诸如、等用户可输入编辑元素的值提交给服务器。easyui框架中，form作为一个单独的控件，功能和传统的form表单类似，并具备了很多独有的特性。
EasyUI很全的CSS样式文件与图标
11-30
EasyUI很全的CSS样式文件与图标，开发在使用图标的时候一般比较实用，很漂亮，也很全
easyui入门视频
09-05
总的来说，通过“easyui入门视频”，初学者将能够掌握EasyUI的基本用法，理解其组件体系，学会如何与后端数据进行交互，从而能够独立地使用EasyUI开发出具有专业水准的Web界面。对于希望快速提升Web开发技能的Java...
easyUI之dialog控件和form控件的使用，大厂面试必备技能问题
m0_60635609的博客
04-15 912
正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。// 联想到$(“#dd”).dialog(“open”);二，form（表单）控件的使用。
使用EasyUI时的基础知识，关键词【List与Set，HashMap，Java访问数据库，Spring框架，SpringMVC，Spring的AOP，IOC|DI，Easyui，SpringDat】
缘字诀的博客
07-14 222
1）List与Set的区别： a)List有序【有索引】、Set无序【没有索引、TreeSet底层使用二叉树结构实现，所以有序】 b)List允许数据重复、Set不允许重复 c)实际开发中可以使用Set集合来去除重复数据 2）列举你熟悉的几种List与Set？ a)数组结构 b)链表结构【单向链表、双向链表】 c)键值对 d)二叉树 e)矩阵 3）HashMap与HashTable的区别 a)Ha...
表单校验（js），easyui
07-11
本资源有首页删除、增加、查看、导出表单、模糊查询的。添加、修改、查看用一个页面来控制。增加修改有表单校验，select下拉框控制很出色。
EasyUI 另一种form提交方式
11-30
由于EasyUI自带的Form提交方式会自动去除掉readonly和disabled的值，或者多层form时，不能正确获取到form表单中的数据，由此，产生了这个专门针对EasyUI form的提交工具。
EASYUI表单扩展
03-23
NULL 博文链接：https://zhangfy068.iteye.com/blog/1039140
EasyUI:easyui-textbox:setValue赋值失败(dialog渲染)
awangwu的博客
08-29 1668
开发十年，就只剩下这套Java开发体系了 &gt;&gt;&gt;    ...
EasyUi框架
qq_47455677的博客
07-04 860
EasyUi框架
解决Easyui Tab href 加载对话框中form重复提交问题
Hello,World!
10-21 1330
原因分析：      只要是对话框，或者Window，Easyui都会将其放到body下，tab控件通过href加载对话框后，对话框也会放到body下，当tab被关闭时，处于body下的对话框不会被销毁，再次打开时就会重复加载，从而form会重复提交。     临时解决方法是，先记录下href加载了哪些对话框，在tab被关闭时，去destroy那些对话框。 $("#MR_").tre
easyUI之dialog控件和form控件的使用
m0_60666841的博客
04-11 809
在book.js中增加一列来放操作，在操作列的每一行放入单元格放修改的a标签代码如下：field : ‘操作’,title : ‘操作’,return ‘效果如下：一，dialog（对话框窗口）控件的使用在userManage.jap中添加如下代码为修改添加点击事件：当点击人员信息维护时对话框窗口会自动弹出，因此添加closed属性为true，默认为关闭closed：定义是否可以关闭的窗口同时在book.js中写如下方法，实现当点击修改时弹出对话框窗口。
easyui ajax提交表单,EasyUI Form表单提交
weixin_39669265的博客
08-05 1163
转自：https://www.cnblogs.com/net5x/articles/4576926.htmlForm(表单)使用$.fn.form.defaults重写默认值对象form提供了各种方法来操作执行表单字段，比如：ajax提交, load, clear等等。当提交表单的时候可以调用validate方法检查表单是否有效。用法创建一个简单的HTML表单。构建一个包含id、action和me...
EasyUI之表单Form
牛栏山矿泉水
10-29 302
1、实例背景 EasyUI常用的Form表单，利用输入框直接提交值；清空按钮，将填写有误的数据进行清空 2、实例源码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;EasyUI之表单Form&lt;/title&gt; &lt;li
jQuery_EasyUI全面教程：从入门到精通
"一个很好的jQuery EasyUI教程，适合新手入门，涵盖了从基础的拖放操作到复杂的DataGrid、窗口、树形结构以及表单的使用，详细解析了EasyUI的各种组件和功能，帮助读者快速掌握EasyUI框架。" jQuery EasyUI 是一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值