<%@ 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>
