`

【表单】-004-通过form手动提交表单

阅读更多

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



 

 

 

 

 

2、/WebContent/jsp/form_004.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手动提交表单
		$('#myform').form({
			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
				});
			}
		});
		
		//手动提交表单
		$('#btn').click(function() {
			$('#myform').submit(); 
		});
		
		
	});
</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>

 

  • 大小: 20.7 KB
  • 大小: 30.5 KB
  • 大小: 3.4 KB
  • 大小: 42.7 KB
  • 大小: 7.1 KB
分享到:
评论

相关推荐

    原生JS经典小项目-form表单校验

    原生JS经典小项目-form表单校验

    使layui.js form 可主动验证表单是否通过

    使layui.js form 可主动验证表单是否通过。扩展layui下的form.js 。文章链接 https://blog.csdn.net/qq_17837497/article/details/107505486

    lambda-form:使用 AWS Lambda 处理表单提交的无服务器服务

    联系表单通常通过电子邮件发送给提交者和表单的创建者/所有者。 此无服务器功能处理向双方发送电子邮件。 部署此函数并创建关联的 s3 存储桶以存储表单配置和提交。 创建表单配置并上传到s3存储桶。 这可以手动...

    AngularJS实现表单手动验证和表单自动验证

    所谓手动验证是通过AngularJS表单的属性来验证。而成为AngularJS表单必须满足两个条件: 1、给form元素加上novalidate=”novalidate”; 2、给form元素加上name=”theForm”,如下: &lt;!DOCTYPE html&gt; &lt;...

    grav-plugin-sequential-form:GRAV的顺序链接表格

    GPM(Grav软件包管理器)安装方法使您能够通过简单的终端命令快速轻松地安装插件,而手动方法使您能够通过zip文件进行安装。 GPM安装(首选) 安装此插件的最简单方法是通过系统终端(也称为命令行)通过 )。 在...

    jquery-enhanced-form:一个干净的 jQuery 插件,用于快速 ajax 表单原型设计等等

    bower install jquery-enhanced-form 如果您希望 Bower 自动将此依赖项添加到您的bower.json ,只需添加--save : bower install --save jquery-enhanced-form 或者您可以手动编辑bower.json以添加依赖项: " ...

    layui插件表单验证提交触发提交的例子

    今天小编就为大家分享一篇layui插件表单验证提交触发提交的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

    stream-form-data:用于用Python编写的多部分数据的流分析器

    streaming_form_data提供了一个Python解析器,用于解析multipart/form-data输入块(在通过HTML表单通过HTTP提交数据时使用的编码)。 安装 $ pip install streaming-form-data 如果您希望克隆Github存储库并手动...

    magento2-form-field-manager:Magento2的客户和地址表单字段经理

    默认情况下是magento或其他第三方扩展添加的之后(创建管理订单)特征从以下内容中删除不需要的表单字段: 管理员订单创建客户管理员无需修改代码或模板通过Magento后端打开/关闭表单字段。客户属性名称前缀中间名/...

    微信小程序实现form表单本地储存数据

    本文实例为大家分享了微信小程序实现form表单本地储存数据的具体代码,供大家参考,具体内容如下 效果图: 主要利用小程序的getStorage来实现异步本地储存。 小程序目录结构如下: 新建项目前,为了简化操作可直接...

    angular-form:AngularJs的简单动态表单伴侣

    或从上面的链接手动下载zip 插入JS和CSS依赖项 &lt; link rel =" stylesheet " href =" bower_components/angular-form/angular-form.css "/&gt; &lt; script src =" bower_components/angular-form/angular-form....

    react-valid-form:React形式验证组件

    React有效形式 React表单验证组件。... 您可以通过onSubmit={(form, data, valid)}事件关注有关表单的详细信息。 自动提交示例 // App.js import React from 'react' ; import ValidForm from 'react-valid-fo

    Zebra_Form:jQuery增强PHP库,用于创建和验证HTML表单-开源

    通过提供强大的内置客户端和服务器端验证,它使开发人员摆脱了编写用于验证表单的代码的重复任务。 具有集成的跨站点脚本防护机制,该机制可自动从提交的数据中剥离出潜在的恶意代码。 它还可以防止开箱即用的自动...

    jQuery解决input超多的表单提交

    近段时间接到一个比较奇葩的需求,对方要求在企业站中加入一个类似word的表单,并供用户在线填写与提交。 仔细看了一下,该表单的字段高达一百多个,这个量级是相当可怕的。如果每个input手动去填写id和name的话,该...

    解决antd Form 表单校验方法无响应的问题

    antd 的 表单校验方法包括 ...发现无响应, 无报错, 完全蒙逼了, 排查良久, 添加校验字段后发现可以成功校验, 于是想着大不了我全部手动添加字段名校验, 终于, 错误的原因浮现出来了 from.validateFields([n

    react ant Design手动设置表单的值操作

    1.设置表单的值 this.props.form.setFieldsValue({ name:”张三”, }); 2.清空表单的值 this.props.form.resetFields(); 3.获取某一输入框的值 this.props.form.getFieldValue(‘newPassword’); 4.获取整个...

    Vue 实现把表单form数据 转化成json格式的数据

    目的:Vue 中 把表单form数据 转化成json格式的数据 第一步:创建一个数据集(就是你表单需要的数据) 如果你表单都是一些正常的数据,比如 text 什么的。你定义好数据集,就去用 v-model 绑定数据。这样就可以实现...

    paulzi-form:JavaScript 表单助手

    JavaScript 表单助手。 这个包已经过时了。 现代浏览器包的进一步开发是 。 演示: : 安装 通过 NPM 安装 npm install paulzi-form 通过 Bower 安装 bower install paulzi-form 或者手动安装。 在 jQuery 之后...

    q-antd:双绑形式的antd。受控组件的双绑、Form的表单验证

    各个表单元素是双绑的,不需要调用onChange函数手动处理变化后的赋值操作 q-antd的form在使用上比antd的form简单很多,而且form内置了不少自定义布局,能满足绝大数情况下的布局,实在满足不了,可使用manualLayout=...

    ReactJs-State-Props-Form-Validation:React Js,状态和道具如何在应用程序中进行表单验证

    该项目是通过引导的。 您将在下面找到一些有关如何执行常见任务的信息。 您可以在找到本指南的最新版本。 目录 自动格式化代码 更改页面&lt;title&gt; 安装依赖项 导入组件 代码分割 添加样式表 后处理CSS 添加...

Global site tag (gtag.js) - Google Analytics