jQuery EasyUI 表单 – 表单验证

jQuery EasyUI 表单验证

jQuery EasyUI（也称为 EasyUI）是一个基于 jQuery 的 UI 框架，它提供了 validatebox 插件来实现表单验证，非常简单高效。表单验证主要通过在输入框上添加 easyui-validatebox 类，并使用 required 和 validType 属性来定义规则。

1. 基本用法

• 在 <input> 或其他表单元素上添加类 easyui-validatebox。
• 使用 required="true" 表示必填。
• 使用 validType 指定验证类型（支持多个，用数组形式）。

示例 HTML：

<form id="ff" method="post">
    <div>
        <label>姓名：</label>
        <input class="easyui-validatebox" type="text" name="name" required="true" />
    </div>
    <div>
        <label>邮箱：</label>
        <input class="easyui-validatebox" type="text" name="email" required="true" validType="email" />
    </div>
    <div>
        <label>主题：</label>
        <input class="easyui-validatebox" type="text" name="subject" required="true" />
    </div>
    <div>
        <label>消息：</label>
        <textarea name="message" style="height:60px;"></textarea>
    </div>
    <div>
        <input type="submit" value="提交" />
    </div>
</form>

2. 表单提交时验证

为了防止无效表单提交，需要在表单的 onSubmit 事件中调用 validate() 方法。

JavaScript 示例：

$('#ff').form({
    url: 'submit_form.php',  // 提交地址
    onSubmit: function() {
        return $(this).form('validate');  // 如果验证失败，返回 false 阻止提交
    },
    success: function(data) {
        $.messager.alert('提示', data, 'info');
    }
});

如果验证失败，会自动显示提示图标和消息，并阻止提交。

3. 内置验证类型（validType）

EasyUI 提供了常见的验证规则：

• email：邮箱格式
• url：URL 格式
• length[min,max]：长度范围，例如 length[5,10]
• remote['url','param']：远程验证（Ajax 检查，例如用户名是否存在）

多个规则示例：

<input class="easyui-validatebox" required="true" 
       validType="['email','length[6,20]']" />

4. 自定义验证规则

可以通过扩展 $.fn.validatebox.defaults.rules 来添加自定义规则。

示例：两次密码一致验证

$.extend($.fn.validatebox.defaults.rules, {
    equals: {
        validator: function(value, param) {
            return value == $(param[0]).val();
        },
        message: '两次密码不一致'
    }
});

HTML 使用：

<input id="pwd" type="password" class="easyui-validatebox" required="true" />
<input type="password" class="easyui-validatebox" required="true" 
       validType="equals['#pwd']" />

另一个示例：最小长度

$.extend($.fn.validatebox.defaults.rules, {
    minLength: {
        validator: function(value, param) {
            return value.length >= param[0];
        },
        message: '至少输入 {0} 个字符'
    }
});

使用：validType="minLength[5]"

5. 其他常用组件验证

• easyui-textbox、easyui-numberbox 等组件也支持验证，直接添加 data-options：

<input class="easyui-textbox" data-options="required:true,validType:'email'" />

参考资源

• 官方文档：https://www.jeasyui.com/documentation/validatebox.php
• 教程示例：https://www.jeasyui.com/tutorial/form/form3.php
• 中文教程：https://www.runoob.com/jeasyui/jeasyui-form-form3.html 或 https://www.jeasyui.cn/tutorial/form/form3.html

EasyUI 的表单验证非常灵活，结合 form 插件使用，能轻松实现客户端验证。如果需要更复杂的远程验证或自定义提示，可以进一步扩展规则。有什么具体问题可以再问！