jEasyUI 表单学习笔记

jEasyUI 是基于 jQuery 的 UI 组件库，提供了丰富的 UI 组件，其中包括表单组件。在本学习笔记中，我们将介绍如何使用 jEasyUI 中的表单组件来构建表单。

准备工作

在使用 jEasyUI 表单组件之前，需要引入以下资源：

htmlCopy Code
<!-- 引入 jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- 引入 jEasyUI 核心脚本及 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.22/themes/default/easyui.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.22/jquery.easyui.min.js"></script>

表单组件

输入框

jEasyUI 提供了多种类型的输入框组件，例如普通文本框、密码框、多行文本框等。下面是一个示例代码：

htmlCopy Code
<input class="easyui-textbox" type="text" name="username" data-options="required:true,validType:'length[6,20]'">

该代码会生成一个普通文本框，具有必填项验证和长度验证。

下拉框

下拉框也是表单中常用的组件之一，可以使用 jEasyUI 的 combobox 组件来创建下拉框。下面是一个示例代码：

htmlCopy Code
<input class="easyui-combobox" name="city" data-options="
    valueField: 'id',
    textField: 'text',
    url: 'get_cities.php'
">

该代码会生成一个下拉框，从 get_cities.php 获取城市列表作为选项。

单选框和复选框

单选框和复选框也是常用的表单组件。使用 jEasyUI 的 radiobox 和 checkbox 组件来创建单选框和复选框。下面是一个示例代码：

htmlCopy Code
<input class="easyui-radiobox" name="gender" value="male" label="男">
<input class="easyui-radiobox" name="gender" value="female" label="女">

<input class="easyui-checkbox" name="hobby" value="reading" label="阅读">
<input class="easyui-checkbox" name="hobby" value="swimming" label="游泳">
<input class="easyui-checkbox" name="hobby" value="traveling" label="旅行">

该代码会生成一个包含两个单选框和三个复选框的表单。

实例效果

下面是一个使用 jEasyUI 表单组件构建的示例表单：

htmlCopy Code
<form id="myForm" method="post">
    <table>
        <tr>
            <td>用户名：</td>
            <td><input class="easyui-textbox" type="text" name="username" data-options="required:true,validType:'length[6,20]'"></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input class="easyui-passwordbox" name="password" data-options="required:true,validType:'length[6,20]'"></td>
        </tr>
        <tr>
            <td>确认密码：</td>
            <td><input class="easyui-passwordbox" name="confirm_password" data-options="required:true,validType:'equals[$('#myForm [name=password]').val()]'"></td>
        </tr>
        <tr>
            <td>城市：</td>
            <td><input class="easyui-combobox" name="city" data-options="
                valueField: 'id',
                textField: 'text',
                url: 'get_cities.php'
            "></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td>
                <input class="easyui-radiobox" name="gender" value="male" label="男">
                <input class="easyui-radiobox" name="gender" value="female" label="女">
            </td>
        </tr>
        <tr>
            <td>爱好：</td>
            <td>
                <input class="easyui-checkbox" name="hobby" value="reading" label="阅读">
                <input class="easyui-checkbox" name="hobby" value="swimming" label="游泳">
                <input class="easyui-checkbox" name="hobby" value="traveling" label="旅行">
            </td>
        </tr>
    </table>
</form>

在这个示例表单中，包含了一个普通文本框和一个密码框，并都加上了必填项验证和长度验证。此外还包含了一个确认密码框，使用 equals 验证规则来确保与密码框的值相等。还包含了一个城市下拉框、一个性别单选框和一个爱好复选框。