EasyUI表单内容整理

时间：2023-03-09 17:05:12
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表单内容整理

相关文章