【表单】-003-通过form自动提交表单 -

lipiaoshui2015

浏览: 101403 次

最近访客更多访客>>

damin

让蛋蛋飞_007

wang_eye

xiaoweishu

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

【表单】-003-通过form自动提交表单

博客分类：

easyui

【表单】-003-通过form自动提交表单

1、form自动提交表单的前台界面

2、WebContent/jsp/form_003.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String root = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>表单--form自动提交</title>
<!-- 引入外部样式 -->
<link rel="stylesheet" type="text/css" href="<%=root %>/css/common.css" />
<!-- 引入easyui依赖库 -->
<script type="text/javascript" src="<%=root %>/js/jquery-easyui-1.2.6/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="<%=root %>/js/jquery-easyui-1.2.6/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="<%=root %>/js/jquery-easyui-1.2.6/themes/icon.css" />
<script type="text/javascript" src="<%=root %>/js/jquery-easyui-1.2.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=root %>/js/jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
	$(function() {
		
		/*
			表单提交的三种方式：
			1、传统ajax方式提交
			2、定义form自动提交
			3、定义form手动提交
		*/
		
		/*
			1. validatebox验证框组件
			   A、required：定义是否字段应被输入。
			   B、missingMessage：当文本框是空时出现的提示文字。
			   C、invalidMessage：当文本框的内容无效时出现的提示文字。
			   D、validType：定义字段的验证类型，与自定义验证规则配合使用。
			   
		*/
		//自定义验证规则
		$.extend($.fn.validatebox.defaults.rules, {   
		    midLength: {   
		        validator: function(value, param){   
		            return value.length >= param[0] && value.length <= param[1];   
		        },   
		        message: ''  
		    },
		    equalLength: {   
		        validator: function(value, param){   
		            return value.length == param[0];   
		        },   
		        message: '密码必须为{0}个字符'  
		    }   
		}); 
		
		/*
			2. numberbox数字框组件
			   A、min：允许的最小值，若小于最小值，则值自动设置为最小值。
			   B、max：允许的最大值，若大于最大值，则值自动设置为最大值。
			   C、该组件继承了validatebox验证框组件，故可以使用其的属性。
			   D、precision：显示在小数点后面的最大精度。
		*/
		$('#age').numberbox({
			min:0,
			max:150,
			required:true, 
			missingMessage:'年龄必填',
			precision:0
		});
		
		/*
			3. datebox日期框组件
			  A、该组件继承了combo组件，可以使用其的editable属性
			  B、editable：定义是否用户可以往文本域中直接输入文字
			  C、combo组件继承了validatebox验证框组件，故可以使用其的required和missingMessage属性
		*/
		$('#birthday').datebox({
			required:true,
			missingMessage:'生日必填',
			editable:false
		});
		
		/*
			4. combobox下拉框组件
			 A、url：从远程加载列表数据的url。
			 B、valueField：绑定到 ComboBox的 value上的基础数据的名称，与json的key一致。
			 C、textField：绑定到combobox的text上的基础数据的名称，与json的value一致。
			 D、panelHeight：值为auto表示下拉框的高度自适应。
		*/
		$('#city').combobox({
			url:'<%=root%>/UserServlet?method=getCity',
			valueField:'id',
			textField:'name',
			required:true, 
			missingMessage:'所属城市必填',
			editable:false,
			panelHeight:'auto'
		});
		
		//numberbox数字框组件
		$('#salary').numberbox({
			min:1000,
			max:20000,
			required:true, 
			missingMessage:'薪水必填',
			precision:2
		});
		
		/*
			5. datetimebox日期时间框组件
		*/
		$('#starttime,#endtime').datetimebox({
			required:true, 
			missingMessage:'时间必填',
			editable:false
		});
		
		//表单提交方式二：通过form自动提交表单
		$('#btn').click(function() {
			$('#myform').form('submit',{
				url:'<%=root%>/UserServlet?method=save', //请求地址
				onSubmit: function(){   //提交前的检查工作
					//validate方法：进行表单字段验证，当全部字段都有效时返回 true。
					//这个方法和 validatebox插件一起使用
					if(!$('#myform').form('validate')) {
						$.messager.show({
							title:'提示信息',
							msg:'数据校验不通过,请先检查数据'
						});
						return false; //表单验证不通过的时候 必须要return false 
					}
				},
				success:function(result) {
					var result = $.parseJSON(result);
					$.messager.show({
						title:result.status , 
						msg :result.message
					});
				}
			});
		});
		
		
	});
</script>
</head>
<body>
	<div id="mydiv" class="easyui-panel" title="新增用户" iconCls="icon-add"
		style="width:400px; height:350px;">
		<form id="myform" action="" method="post">
			<table>
				<tr>
					<td>用户名:</td>
					<td><input type="text" name="username" class="easyui-validatebox" required="true" missingMessage="用户名必填" validType="midLength[2,5]" invalidMessage="用户名必须在2到5个字符之间"/></td>
				</tr>
				<tr>
					<td>密码:</td>
					<td><input type="password" name="password" class="easyui-validatebox" required="true" missingMessage="密码必填" validType="equalLength[4]" /></td>
				</tr>
				<tr>
					<td>性别:</td>
					<td>
						男<input type="radio" name="sex" checked="checked" value="1">
						女<input type="radio" name="sex" value="2">
					</td>
				</tr>
				<tr>
					<td>年龄:</td>
					<td><input id="age" type="text" name="age"></td>
				</tr>
				<tr>
					<td>出生日期:</td>
					<td><input id="birthday" type="text" name="birthday" style="width:146px;"/></td>
				</tr>
				<tr>
					<td>所属城市:</td>
					<td><input id="city" type="text" name="city" style="width:146px;"></td>
				</tr>
				<tr>
					<td>薪水:</td>
					<td><input id="salary" type="text" name="salary" /></td>
				</tr>
				<tr>
					<td>开始时间:</td>
					<td><input id="starttime" type="text" name="starttime" style="width:160px;"/></td>
				</tr>
				<tr>
					<td>结束时间:</td>
					<td><input id="endtime" type="text" name="endtime" style="width:160px;"/></td>
				</tr>
				<tr>
					<td>个人描述:</td>
					<td><input type="text" name="description" class="easyui-validatebox" required="true" missingMessage="个人描述必填" validType="midLength[5,50]" invalidMessage="个人描述必须在5到50个字符之间"/></td>
				</tr>
				<tr align="center">
					<td colspan="2">
						<a id="btn" class="easyui-linkbutton">保存</a>
					</td>
				</tr>   
			</table>
		</form>
	</div>
</body>
</html>