EasyUI表单内容整理
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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>测试表单</title> <script type="text/javascript" src="js/jquery-easyui-1.4.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.4/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.4/themes/icon.css">
<script type="text/javascript" src="js/jquery-easyui-1.4.4/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript"> $(function(){
$("#myform").form({
novalidate:false,
url:'TestSubmit',
onSubmit:function()
{
var isValid = $(this).form('validate'); //alert('表单测试=' + isValid);
if(!isValid)
{
$.messager.show({
title:'表单验证',
msg:'验证未通过'
})
} return isValid;
},success:function(data){
alert(data);
}
})
$("#subbutton").click(function(){
$("#myform").form('submit');
})
}) </script>
</head>
<body> <div id="mypanel" title="用户信息" class="easyui-panel" style="width:220px;height:400px;"> <form id='myform' method="post">
<table>
<tr>
<td>用户名称:</td>
<td><input width=30 class="easyui-textbox"
data-options="required:true,validType:'length[2,5]',missingMessage:'必须填写用户名'"/></td>
</tr> <tr>
<td>用户邮箱:</td>
<td><input width=30 class="easyui-textbox"
data-options="required:true,validType:'email',invalidMessage:'请填写有效的邮箱'"/></td>
</tr> <tr>
<td>个人主页:</td>
<td><input width=30 class="easyui-textbox"
data-options="required:false,validType:'url',prompt:'提示信息',iconCls:'icon-search'"/></td>
</tr> <tr>
<td>密码:</td>
<td><input type="password" width=30 class="easyui-textbox"
data-options="required:true,validType:'length[6,6]',missingMessage:'请输入6位数密码'"/></td>
</tr> <tr>
<td>年龄:</td>
<td><input width=30 class="easyui-numberbox"
data-options="required:false,precision:2,min:18,max:70"/></td>
</tr> <tr>
<td>工资:</td>
<td><input width=30 class="easyui-numberbox"
data-options="required:false,precision:0,min:0,prefix:'$'"/></td>
</tr> <tr>
<td>生日:</td>
<td><input width=30 class="easyui-datebox"
data-options="required:true,editable:false"/></td>
</tr> <tr>
<td>注册时间:</td>
<td><input width=30 class="easyui-datetimebox"
data-options="required:true,editable:false"/></td>
</tr> <tr>
<td>城市:</td>
<td><select class="easyui-combobox" style="width:100px">
<option value="0">未选择</option>
<option value="1">北京</option>
<option value="2">上海</option>
</select>
</td>
</tr> <tr>
<td>城市1:</td>
<td><input id="yij" class="easyui-combobox" style="width:100px" data-options="required:false,
valueField:'id',
textField:'name',
url:'JsonMembers?parentid=0',
value:'-1',
onSelect:function(rec){
var url='JsonMembers?parentid='+rec.id;
$('#erj').combobox('clear'); $('#erj').combobox('reload',url);
$('#erj').combobox('setValue','-1'); $('#sanj').combobox('clear'); $('#sanj').combobox('reload','JsonMembers');
$('#sanj').combobox('setValue','-1');
}" />
</td>
</tr> <tr>
<td>城市2:</td>
<td><input id="erj" class="easyui-combobox" style="width:100px"
data-options="required:false,valueField:'id',textField:'name',url:'JsonMembers',value:'-1',
onSelect:function(rec){
var url='JsonMembers?parentid='+rec.id;
$('#sanj').combobox('clear'); $('#sanj').combobox('reload',url);
$('#sanj').combobox('setValue','-1');
}" />
</td>
</tr> <tr>
<td>城市3:</td>
<td><input id="sanj" class="easyui-combobox" style="width:100px"
data-options="required:false,valueField:'id',textField:'name',url:'JsonMembers',value:'-1'" />
</td>
</tr> <tr>
<td colspan=2 align="center">
<a id='subbutton' class="easyui-linkbutton" style="width:40px">提交</a></td>
</tr>
</table>
</form> </div> </body>
</html>
EasyUI表单内容整理的更多相关文章
- EasyUI表单验证，自定义插件验证，自定义js插件验证，远程验证，常见手机号，中英文，qq等验证规则验证
{ field : 'startPort', title : "起始端口", editor: "text", width : 50, editor: { ...
- easyui表单插件-包括日期时控件-列表
← jQuery EasyUI 表单插件 – Numberspinner 数值微调器 jQuery EasyUI 表单插件 - Timespinner 时间微调器 jQuery EasyUI 插件 ...
- easyui表单提交，后台获取不到值
J2ee开发,使用easyui表单提交,在ie中可以正常将参数传递到后台,但使用firefox,chrome都无法将easyui的combobox值传递到后台,使用alert($('#form').s ...
- c#程序为PDF文件填写表单内容
众所周知,PDF文件一般情况下是无法修改的,如果你有一张现成的PDF表格,这时想通过编程实现从数据库或者动态生成内容去填写这张表格,就会有些问题了,首先我们要解决以下2个重要的问题: 1.如何将内容写 ...
- easyUI表单基础知识
easyUI创建异步提交表单 我们创建一个带有 name.email 和 phone 字段的表单.通过使用 easyui 表单(form)插件来改变表单(form)为 ajax 表单(form).表单 ...
- Django--post提交表单内容
本节目标:①.提交表单内容②.通过客户端提交表单新增一篇文章③.通过Django的forms组件来完成新增一篇文章 =======提交表单内容======== 1.前端html:login.html ...
- JQuery EasyUI 表单
EasyUI 创建异步提交表单 ♦ 通过使用 easyui 表单插件来改变表单为 ajax表单. 表单提交所有字段到后台服务器,服务器处理和发送一些数据返回到前端页面.我们接收返回数据,并将它显示出来 ...
- 雷林鹏分享：jQuery EasyUI 表单 - 创建异步提交表单
jQuery EasyUI 表单 - 创建异步提交表单 本教程向您展示如何通过 easyui 提交一个表单(Form).我们创建一个带有 name.email 和 phone 字段的表单.通过使用 e ...
- 雷林鹏分享：jQuery EasyUI 表单 - 创建树形下拉框
jQuery EasyUI 表单 - 创建树形下拉框 树形下拉框(ComboTree)是一个带有下列树形结构(Tree)的下拉框(ComboBox).它可以作为一个表单字段进行使用,可以提交给远程服务 ...
随机推荐
- JQuery获取浏览器窗口的可视区域高度和宽度,滚动条高度
alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height()); //浏览器时下窗口文档的高度 alert($(docum ...
- SQL 存储过程 分页查询
ALTER PROCEDURE [dbo].[gzProc_TablePage] @tablename varchar(MAX),--表名 @selcolumn varchar(MAX),--查询字段 ...
- Js零散知识点笔记
1.将类数组对象转换为数组 ES5: var arrLike = document.querySelectorAll('span'); var arr = Array.prototype.slice. ...
- MS SQL-Server快捷键
快捷键 功能 Ctrl+Shift+B 生成解决方案 Ctrl+F7 生成编译 Ctrl+O ...
- 创建EF数据模型
最后的应用程序,看上去就像下边这样: 创建数据模型,你将从以下三个类开始: 在Models文件夹,新建以下类: using System; using System.Collections.Gener ...
- Sprint(第十二天11.25)
- ROWID伪列
ROWID伪列概念: 在数据表中每一行所保存的记录,oracle会为每条记录分配一个唯一的地址编号,这个编号就是通过ROWID表示的. 所有的数据都利用ROWID进行定位. 观察rowid的存在 SQ ...
- 【Java】需要注意的小细节
一.==和equals 1.比较两个变量时 a.==可以判断两个变量是否相等,如果两个变量是基本类型变量,而且是数值类型,只要两个变量值相等,返回true. 2.比较两个引用变量 a.==只有两个引用 ...
- ps中的位图，矢量图，颜色模式
什么是位图?什么是矢量图? 位图是由像素组成的图像,在缩放和旋转的时候容易失真,同时文件容量较大 矢量图是根据几何特性来绘制的图形,通过数学公式计算获得的,不易制作色彩变化太多的图象 颜色模式 RGB ...
- javascript的假查询
1. function select(){ var text=$("#ss").val();//获得关键字 $("#show_tab tr").hide().f ...