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).它可以作为一个表单字段进行使用,可以提交给远程服务 ...
随机推荐
- 第一代intel核显id:0046的10.9驱动安装详解(转)
一代0046 intel核显hd1000m 10.8的驱动已经失效了,开不了QE/CI的 从tonymac找来的驱动,并完善一下 直接上驱动啦 安装步骤务必按照顺序进行,不然是驱动不起来的 第一步:首 ...
- python基础编程
1.if else var1 = 100 if var1: print ("1 - if 表达式条件为 true") print (var1) #为0时,条件不成立 var2 = ...
- git中常用命令小结
提交过程 查看文件改动以及新增的文件 git status 添加新增文件 git add your_file_path // 添加全部文件 git add * // 添加某类型文件 提交文件 git ...
- jQuery.first() 函数
first() 函数详解 函数 获取当前对象的第一个元素 语法 $selector.first() 返回值 返回值为一个对象 实例说明 代码 <!DOCTYPE html><html ...
- zookeeper 故障重连机制
一.连接多个服务器,用逗号隔开 如果在连接时候zk服务器宕机 To create a client session the application code must provide a connec ...
- centos7 安装redis 开机启动
redis 下载 https://redis.io/download wget http://download.redis.io/releases/redis-3.2.6.tar.gz 解压缩 .ta ...
- 无法删除对象 '产品',因为该对象正由一个 FOREIGN KEY 约束引用。
在删除northwindcs表时,发生报错,消息 3726,级别 16,状态 1,第 2 行,无法删除对象 '产品',因为该对象正由一个 FOREIGN KEY 约束引用.此时判断是因为有其他表的外键 ...
- contiki-定时器etimer
Contiki内核是基于事件驱动和Protothreads机制,事件既可以是外部事件(比如按键,数据到达),也可以是内部事件(如时钟中断).定时器的重要性不言而喻,Contiki提供了5种定时器模型, ...
- 推荐两本学习linux的经典书籍
- spark 安装
Spark 集群安装 1.上传tar包,解压tar包 tar -zxvf spark-2.0.0-bin-hadoop2.6.tgz 2.修改配置文件(这是yarn模式) 进入 spark/conf ...