Easy UI 简介和表单验证

最新推荐文章于 2025-06-14 11:19:55 发布

西雅图奶奶

最新推荐文章于 2025-06-14 11:19:55 发布

阅读量1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：所学新知识

本文链接：https://blog.youkuaiyun.com/qq_38306741/article/details/79181989

所学新知识专栏收录该内容

2 篇文章

订阅专栏

EasyUI是一种基于jQuery的用户界面插件集合，它简化了现代化互动JavaScript应用的开发过程。使用EasyUI，开发者仅需编写简单的HTML标记即可定义复杂的用户界面。本文介绍了如何使用EasyUI创建并提交一个简单的表单。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Easy UI简介：

1.easyui是一种基于jQuery的用户界面插件集合。

2.easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。

3.使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。

4.easyui是个完美支持HTML5网页的完整框架。

5.easyui节省您网页开发的时间和规模。

6.easyui很简单但功能强大的。

Easy UI Form 表单：

创建一个简单的 HTML 表单。构建表单并给 id、action、method 赋值。

<form id="ff" method="post">
    <div>
		<label for="name">Name:</label>
		<input class="easyui-validatebox" type="text" name="name" data-options="required:true" />
    </div>
    <div>
		<label for="email">Email:</label>
		<input class="easyui-validatebox" type="text" name="email" data-options="validType:'email'" />
    </div>
</form>

让表单（form）成为 ajax 提交的表单（form）；

$('#ff').form({
    url:...,
    onSubmit: function(){
		// do some check
		// return false to prevent submit;
    },
    success:function(data){
		alert(data)
    }
});
// submit the form
$('#ff').submit();

处理提交响应

提交一个 ajax 表单（form）是非常简单的。当提交完成时用户可以获得响应数据。请注意，响应数据是来自服务器的原始数据。对响应数据的解析动作要求获得正确的数据。

例如，响应数据假设是 JSON 格式，一个典型的响应数据如下所示：

{
    "success": true,
    "message": "Message sent successfully."
}

现在在 'success' 回调函数中处理 JSON 字符串。

$('#ff').form('submit', {
    success: function(data){
		var data = eval('(' + data + ')'); // change the JSON string to javascript object
		if (data.success){
			alert(data.message)
		}
    }
});