博客

如何使用jQuery EasyUI加载和验证表单数据

  • Post category:jquery

为方便说明，以下假设我们正在开发一个简单的用户信息编辑页面。

1. 引入jQuery EasyUI

首先要确保页面已经引入了jQuery和jQuery EasyUI库，这可以通过在head部分添加如下代码实现：

<head>
    <meta charset="UTF-8">
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.easyui/1.8.4/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.easyui/1.8.4/themes/icon.css">
    <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.easyui/1.8.4/jquery.easyui.min.js"></script>
</head>

2. 创建表单

我们可以使用HTML 原生语法来创建表单，也可以通过jQuery EasyUI的表单组件来创建，这里为了演示方便，我们使用jQuery EasyUI创建一个表单。

<form id="user-form" method="post">
    <table>
        <tr>
            <td>用户名:</td>
            <td><input name="username" class="easyui-validatebox" required="true"></td>
        </tr>
        <tr>
            <td>密码:</td>
            <td><input name="password" type="password" class="easyui-validatebox" required="true"></td>
        </tr>
        <tr>
            <td>年龄:</td>
            <td><input name="age" class="easyui-numberbox" precision="0" min="1" max="120"></td>
        </tr>
        <tr>
            <td>性别:</td>
            <td>
                <select name="gender" class="easyui-combobox" required="true">
                    <option value="1">男</option>
                    <option value="2">女</option>
                </select>
            </td>
        </tr>
    </table>
</form>

3. 加载表单数据

当我们需要编辑一个用户的信息时，我们需要将其原有的信息显示在表单中。下面的代码展示了如何使用EasyUI的form组件来加载表单数据。

$(function(){
    // 模拟数据
    var data = {
        username: 'Tom',
        password: '123456',
        age: 21,
        gender: 1
    };

    // 加载表单数据
    $('#user-form').form('load', data);
});

在上面的代码中，我们首先定义一组模拟的用户信息数据，然后使用 form 组件的 load 方法将数据加载到表单中。

4. 表单数据验证

当用户提交表单时，我们需要验证表单数据是否合法。EasyUI提供了validatebox和numberbox等组件来实现表单数据验证，我们可以在HTML中添加特定的属性来定义表单数据的验证规则。

<form id="user-form" method="post">
    <table>
        <tr>
            <td>用户名:</td>
            <<td><input name="username" class="easyui-validatebox" required="true"></td>
        </tr>
        <tr>
            <td>密码:</td>
            <td><input name="password" type="password" class="easyui-validatebox" required="true"></td>
        </tr>
        <tr>
            <td>年龄:</td>
            <td><input name="age" class="easyui-numberbox" precision="0" min="1" max="120"></td>
        </tr>
        <tr>
            <td>性别:</td>
            <td>
                <select name="gender" class="easyui-combobox" required="true">
                    <option value="1">男</option>
                    <option value="2">女</option>
                </select>
            </td>
        </tr>
    </table>
    <div style="text-align:center;padding:5px">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitUserForm()">保存</a>
    </div>
</form>

<script>
    function submitUserForm() {
        $('#user-form').form('submit',{
            url:'/api/user/save',
            onSubmit:function(){
                return $(this).form('validate');
            },
            success:function(data){
                // 处理成功后的回调函数
            }
        });
    }
</script>

上述代码中，我们 input 标签的 class 属性中添加了 easyui-validatebox，意味着这是一个需要验证的输入框；required="true" 表示该输入框是必填项。此外，easyui-numberbox 组件同样支持数据验证，并且可以限制输入框输入的数字的精度、最小值和最大值。最后，在提交表单时，我们还需要调用 form 组件的 validate 方法来对表单数据进行验证。如果验证通过，则允许提交表单，否则不提交表单并弹出错误提示。

参考示例：

<form id="user-form" method="post">
    <table>
        <tr>
            <td>用户名:</td>
            <td><input name="username" class="easyui-validatebox" required="true"></td>
        </tr>
        <tr>
            <td>邮箱:</td>
            <td><input name="email" class="easyui-validatebox" validType="email"></td>
        </tr>
        <tr>
            <td>年龄:</td>
            <td><input name="age" class="easyui-numberbox" precision="0" min="1" max="120"></td>
        </tr>
    </table>
    <div style="text-align:center;padding:5px">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitUserForm()">保存</a>
    </div>
</form>

<script>
    function submitUserForm() {
        $('#user-form').form('submit',{
            url:'/api/user/save',
            onSubmit:function(){
                return $(this).form('validate');
            },
            success:function(data){
                // 处理成功后的回调函数
            }
        });
    }
</script>

在上述示例中，我们新增了一个email输入框，在输入框中添加了 validType="email"，表示该输入框需要输入合法的邮箱地址。

Tags: