<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- easyui的样式 -->
<link rel="stylesheet" type="text/css" href="../jslib/jquery-easyui-1.3.1/themes/default/easyui.css">
<!-- 小图标的样式 -->
<link rel="stylesheet" type="text/css" href="../jslib/jquery-easyui-1.3.1/themes/icon.css">
<script type="text/javascript" src="../jslib/jquery-easyui-1.3.1/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../jslib/jquery-easyui-1.3.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../jslib/jquery-easyui-1.3.1/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
var loginAndRegDialog;
$(function(){
loginAndRegForm = $('#loginAndRegForm').form({
url : 'http://localhost:8001/sypro/userController/login.action',
success : function(r){
//返回的r是一个字符串，需要转换成json对象
r = jQuery.parseJSON(r);
if(r&&r.success){
$('#loginAndRegDialog').dialog('close');
$.messager.show({
title : '提示',
msg : r.msg
});
}else{
$.messager.alert('提示',r.msg);
}
}
});
loginAndRegForm.find('input').on('keyup', function(event) {/* 增加回车提交功能 */
if (event.keyCode == '13') {
loginAndRegForm.submit();
}
});
loginAndRegDialog = $('#loginAndRegDialog').dialog({
closable:false,
modal : true,
buttons : [{
text : '登录',
handler : function(){
loginAndRegForm.submit();
}
},{
text : '注册',
handler : function(){
alert("注册");
}
}]
});
});
</script>
</head>
<body>
<div id="loginAndRegDialog" class="easyui-dialog" title="用户登录" style="top:100px;width:400px;height:200px;">
<form id="loginAndRegForm" method="POST">
<table>
<tr>
<th>
用户名
</th>
<td>
<!-- easyui-validateBox进行输入校验 -->
<input name="name" class="easyui-validateBox" required="true" invalidMessage="用户名格式不正确" missingMessage="用户名不能为空"/>
</td>
</tr>
<tr>
<th>
密码
</th>
<td>
<input name="pwd" type="password" class="easyui-validateBox" required="true" />
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
相关推荐
1. Form表单和input标签：在Web开发中，表单用于收集用户输入的数据，而input标签是表单中必不可少的元素。其中，文本输入框（text）是最基本和常用的类型，它允许用户输入各种信息。 2. 数据校验的必要性：由于...
Easy UI form表单中的输入验证框和常用控件。如：validatebox增加对time、date、datetime的验证。两次输入密码一致的验证、自定义下拉框等
总之，EasyUI提供的表单验证功能使得在提交表单之前进行数据校验变得简单易行。通过在`onSubmit`事件中调用`form('validate')`方法，我们可以有效地确保用户输入的数据符合预设的验证规则，从而提高应用程序的用户...
通过对常见表单元素的支持以及丰富的验证规则配置选项，该框架能够有效提升前端数据验证的能力。此外，通过扩展文件的引入，可以进一步增强框架的功能性和灵活性。开发者可以根据项目需求灵活运用这些技术手段，构建...
在网页开发过程中，表单验证是非常重要的一个环节，它不仅能够提高用户体验，还能确保数据的有效性和安全性。jQuery Validate插件是实现表单验证功能的一个强大工具，它提供了丰富的验证规则和自定义选项。然而，...
然而，在实际操作中，我们可能会遇到`form.validate()`方法总是返回`false`的问题，导致表单无法正常提交。这个问题通常是由于一些配置错误或不兼容的组件使用所引起的。本文将详细分析这一问题的原因，并提供相应的...
在现代网页开发中，使用...5. 理解并实现表单数据的绑定和校验。 对于想要深入学习Web前端开发的读者来说，本示例代码提供了一个很好的实践起点，可以帮助读者更好地理解jQuery和EasyUI在动态数据交互方面的应用。
│ ├── form.js 表单组件 │ ├── validatebox.js 校验组件 │ ├── checkgroup.js 选择列表框 │ ├── common.js 公共函数库 │ └── ... ├── dependencies/ --组件的第三方依赖库 │ ├── ...
- 表单验证(validatebox)：对表单元素进行校验。 - 自定义组合框(combo)：创建自定义下拉列表。 - 可装载组合框(combobox)：下拉列表中可以选择或输入值。 - 组合树(combotree)：结合了树形控件和下拉列表的功能...
通过使用validateBox和validate方法，可以实现表单的数据校验，确保用户输入的有效性。 5. **布局(Layout)** 布局组件用于划分页面区域，支持垂直和水平分割，方便进行复杂的页面布局。每个区域可以嵌套其他EasyUI...
在这个登录 demo 中，我们可能会看到如何使用 `$.fn.dialog` 创建一个弹出式登录窗口，以及如何使用 `$.fn.form` 处理表单提交。 3. **CSS 样式**：EasyUI 提供了一套完整的 CSS 样式库，用于美化界面。登录界面...
- **实现方法**：使用`.form('submit')`方法发送表单数据。 ##### 知识点2：给表单添加复合tree字段 - **概念**：在表单中嵌入一个树形控件。 - **实现方法**：使用`.combotree()`方法创建复合tree字段。 ##### ...
<input type="text" class="easyui-validatebox" required="true" /> <a href="#" class="easyui-linkbutton" onclick="submitForm()">提交 </form> ``` ### 4. 窗口与布局组件 窗口（window）组件可用于创建...
3. **表单组件**：包括`form`、`textbox`、`combobox`、`datebox`、`validatebox`等，提供了丰富的表单元素和验证功能，便于用户输入和数据校验。 4. **数据网格组件**：`datagrid`可以展示和编辑表格数据，支持...