<%@ 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>
原文：http://www.cnblogs.com/shadowduke/p/5081309.html