<%@ 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表单内容整理的更多相关文章

  1. EasyUI表单验证，自定义插件验证，自定义js插件验证，远程验证，常见手机号，中英文，qq等验证规则验证

     { field : 'startPort', title : "起始端口", editor: "text", width : 50, editor: { ...

  2. easyui表单插件-包括日期时控件-列表

    ← jQuery EasyUI 表单插件 – Numberspinner 数值微调器 jQuery EasyUI 表单插件 - Timespinner 时间微调器  jQuery EasyUI 插件 ...

  3. easyui表单提交，后台获取不到值

    J2ee开发,使用easyui表单提交,在ie中可以正常将参数传递到后台,但使用firefox,chrome都无法将easyui的combobox值传递到后台,使用alert($('#form').s ...

  4. c#程序为PDF文件填写表单内容

    众所周知,PDF文件一般情况下是无法修改的,如果你有一张现成的PDF表格,这时想通过编程实现从数据库或者动态生成内容去填写这张表格,就会有些问题了,首先我们要解决以下2个重要的问题: 1.如何将内容写 ...

  5. easyUI表单基础知识

    easyUI创建异步提交表单 我们创建一个带有 name.email 和 phone 字段的表单.通过使用 easyui 表单(form)插件来改变表单(form)为 ajax 表单(form).表单 ...

  6. Django--post提交表单内容

    本节目标:①.提交表单内容②.通过客户端提交表单新增一篇文章③.通过Django的forms组件来完成新增一篇文章 =======提交表单内容======== 1.前端html:login.html ...

  7. JQuery EasyUI 表单

    EasyUI 创建异步提交表单 ♦ 通过使用 easyui 表单插件来改变表单为 ajax表单. 表单提交所有字段到后台服务器,服务器处理和发送一些数据返回到前端页面.我们接收返回数据,并将它显示出来 ...

  8. 雷林鹏分享：jQuery EasyUI 表单 - 创建异步提交表单

    jQuery EasyUI 表单 - 创建异步提交表单 本教程向您展示如何通过 easyui 提交一个表单(Form).我们创建一个带有 name.email 和 phone 字段的表单.通过使用 e ...

  9. 雷林鹏分享：jQuery EasyUI 表单 - 创建树形下拉框

    jQuery EasyUI 表单 - 创建树形下拉框 树形下拉框(ComboTree)是一个带有下列树形结构(Tree)的下拉框(ComboBox).它可以作为一个表单字段进行使用,可以提交给远程服务 ...

随机推荐

  1. hive1.2.1实战操作电影大数据！

    我采用的是网上的电影大数据,共有3个文件,movies.dat.user.dat.ratings.dat.分别有3000/6000和1百万数据,正好做实验. 下面先介绍数据结构: RATINGS FI ...

  2. 读《编写可维护的JavaScript》第八章总结

    第八章 避免“空比较” 我们在对传进来的参数做处理之前,肯定需要验证一下是否是我们想要的,也就是说大多数情况下,我们需要对比一下它的类型. 作者首先给了一个看起来都感觉不对的代码: var Contr ...

  3. Hibernate的性能优化问题

    本文是根据Hibernate帮助文档,以及一些书籍及项目经验整理而成,只提供要点和思路,具体做法可以留言探讨,或是找一些更详细更有针对性的资料. 初用Hibernate的人也许都遇到过性能问题,实现同 ...

  4. 剑指offer三: 斐波拉契数列

    斐波拉契数列是指这样一个数列: F(1)=1; F(2)=1; F(n)=F(n-1)+F(n); public class Solution { public int Fibonacci(int n ...

  5. 水平垂直居中div（css3）

    一.在需要居中的元素加上如下C3属性即可: <!doctype html><html lang="en"><head> <meta cha ...

  6. Zend Studio 11.0 汉化

    1.Help->Install New Software2.在Work with框中复制此地址:http://download.eclipse.org/technology/babel/upda ...

  7. Java抛出OutOfMemoryError:Java heap space堆内存溢出错误的分析方案

    抛出堆内存溢出的错误一定要记得保留现场环境(导出堆内存信息到文件),否则如果无法进行分析,并从根本上解决问题,下次很有可能还会出现. 第一步:导出堆转储文件 我们可以使用Jdk自带的jmap工具.使用 ...

  8. CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  9. css3——新盒子定义box-sizing

    css3对盒子有了新定义,以前的 盒子实际宽(高) = padding + width(height) + ( border * 2); 使用了box-sizing之后盒子实际宽(高) 就等于 wid ...

  10. nginx 支持laravel 5.3配置

    server { listen ; server_name www.baidu.com.cn; root /data/cehuiren/public; #charset koi8-r; #access ...