本教程详解如何使用 jQuery EasyUI 的 validatebox 插件实现表单验证。通过为 input 添加 easyui-validatebox 类及 validType 属性，可轻松实现必填项和邮箱格式校验。同时，利用 form 插件的 onSubmit 事件拦截无效提交，确保数据合法性。

验证后的联系表单效果预览

在开始编码之前，我们先看一下最终实现的效果。一个标准的联系表单应包含姓名、邮箱、主题和消息字段。通过 EasyUI 的验证机制，当用户输入不符合规范（如邮箱格式错误）或未填写必填项时，系统会自动给出提示并阻止表单提交。

前置准备与依赖

在实现表单验证之前，请确保您的项目中已正确引入 jQuery 和 jQuery EasyUI 的核心文件（CSS 和 JS）。这是使用 validatebox 和 form 插件的基础。

创建带有验证功能的联系表单

我们将创建一个简单的联系表单，包含 name、email、subject 和 message 四个字段。实现验证的核心在于为 input 标签添加特定的 CSS 类和属性。

第1步：编写表单 HTML 结构

首先，构建基础的 HTML 表单结构。我们需要为每个输入框指定 name 属性，以便后端处理。

Form Validation

    

        Name:
        
    
    

        Email:
        
    
    

        Subject:
        
    
    

        Message:
        
    
    

        
    

第2步：配置验证规则

为了让表单具备验证功能，我们需要在 input 标签上添加 class="easyui-validatebox"。这告诉 EasyUI 对该输入框应用验证插件。

• 必填验证：添加 required="true" 属性，表示该字段不能为空。
• 格式验证：对于邮箱字段，添加 validType="email" 属性。EasyUI 会自动检查输入内容是否符合标准电子邮件格式。

完成上述 HTML 编写后，当用户尝试提交表单且字段验证失败时，EasyUI 会自动显示红色的错误提示信息。

拦截无效表单提交

仅仅显示错误提示是不够的，我们还需要在用户点击“Submit”按钮时，阻止表单向服务器发送无效数据。这可以通过 EasyUI 的 form 插件的 onSubmit 事件来实现。

第3步：初始化 form 插件并添加验证逻辑

在 JavaScript 中，初始化 #ff 表单，并配置 onSubmit 回调函数。该函数返回 $(this).form('validate') 的结果。如果验证通过，返回 true，表单继续提交；如果验证失败，返回 false，提交被阻止。

$('#ff').form({
    url:'form3_proc.php',
    onSubmit:function(){
        // 执行验证，如果验证失败则返回 false 阻止提交
        return $(this).form('validate');
    },
    success:function(data){
        // 提交成功后显示返回信息
        $.messager.alert('Info', data, 'info');
    }
});

第4步：处理提交结果

在 success 回调函数中，我们使用 $.messager.alert 来显示服务器返回的数据。这有助于用户确认提交是否成功，以及查看后端返回的具体信息。

常见问题与调整

验证提示不显示或样式异常

表现：输入错误格式时，没有红色提示或错误信息不显示。
原因：未正确引入 EasyUI 的 CSS 文件，或者 class="easyui-validatebox" 拼写错误。
解决方法：检查 HTML 头部是否正确引用了 easyui.css，并确保 input 标签的 class 属性完全匹配。

表单仍然提交了无效数据

表现：即使输入框显示错误，点击提交后页面仍刷新或跳转。
原因：onSubmit 函数未正确返回 false，或者按钮类型不是 submit。
解决方法：确保提交按钮的 type 属性为 submit，且 onSubmit 函数中明确返回了 $(this).form('validate') 的结果。

总结

通过本教程，我们学习了如何使用 jQuery EasyUI 的 validatebox 插件创建具有验证功能的联系表单。关键点包括：
1. 使用 class="easyui-validatebox" 启用验证。
2. 利用 required 和 validType 属性定义验证规则。
3. 通过 form 插件的 onSubmit 事件拦截无效提交，确保数据合法性。
这些方法可以灵活调整，以满足不同业务场景下的表单验证需求。

以上就是 jQuery EasyUI 表单验证的详细内容，更多关于 jQuery EasyUI 的资料请关注本站其它相关文章！