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).它可以作为一个表单字段进行使用,可以提交给远程服务 ...
随机推荐
- python的tab自动补全
vi tab.py #!/usr/bin/env python # python startup file import sys import readline import rlcompleter ...
- 【线段树区间合并】HDU1540-Tunnel Warfare
一.题目 Description During the War of Resistance Against Japan, tunnel warfare was carried out extensiv ...
- HTML5 canvas绘图
HTML5 canvas画图 示例 ------- <!DOCTYPE html> <head> <meta charset="UTF-8"> ...
- append追加的使用
#!/usr/bin/env python def fun(arg) : ret = [] for i in range(len(arg)) : if i % 2 ==1 : ret.append(a ...
- MS SQL-Server快捷键
快捷键 功能 Ctrl+Shift+B 生成解决方案 Ctrl+F7 生成编译 Ctrl+O ...
- HashMap原理与优化
参考文献: HashMap的工作原理 java中HashMap重要性质和优化总结 一.HashMap的基本了解 基本定义:根据源代码的描述可知,HashMap是基于哈希表的Map接口的实现,其包含了M ...
- php : DOM 操作 XML
DOM 操作 XML 基本用法 XML文件: person.XML <?xml version="1.0" encoding="utf-8" ?> ...
- validate插件深入学习-02 常用方法和validate对象的方法
①检查表单元素是否有效 valid() 在表单内添加<button id="check">检查</button> $('#check').click(fun ...
- android线程登录
主入口代码: package com.tp.soft.app; import java.io.IOException; import java.util.HashMap; import java.ut ...
- TinyOS 中的 task
task 的目的 做过界面的编程的同学可能会有这种经历,界面不响应,那,其实程序总是在后台运行,但是后台可能是个for循环,那么界面的点击等事件都不能执行. 在windows界面编程中利用了事件机制来 ...