表单验证

使用教程 »表单验证

本教程将向您展示如何验证表单。easyui框架提供了一个validatebox插件来验证表单。 在本教程中，我们将构建一个联系人表单并应用validatebox插件来验证表单。 然后您可以根据自己的需要修改此表单.

构建表单

让我们构建一个包含姓名、电子邮件、主题和消息字段的简单联系人表单:

<form id="ff" method="post" novalidate> <div style="margin-bottom:10px"> <input class="easyui-textbox" label="Name:" name="name" required="true" style="width:100%"> </div> <div style="margin-bottom:10px"> <input class="easyui-textbox" label="Email:" name="email" required="true" validType="email" style="width:100%"> </div> <div style="margin-bottom:10px"> <input class="easyui-textbox" label="Subject:" name="subject" required="true" style="width:100%"> </div> <div style="margin-bottom:10px"> <input class="easyui-textbox" label="Message:" name="message" multiline="true" style="width:100%;height:60px"> </div> <div style="text-align:right"> <input class="easyui-linkbutton" type="submit" value="Submit" style="width:80px;height:30px"> </div> </form>

我们添加了一个名为easyui-textbox的类来输入标记，以创建将根据validType属性应用验证的文本框组件.

防止表单无效时提交

当用户点击表单提交按钮时，如果表单无效，我们应该阻止表单提交.

$('#ff').form({ url:'form3_proc.php', onSubmit:function(){ return $(this).form('validate'); }, success:function(data){ $.messager.alert('Info', data, 'info'); } });

如果表单无效，将显示工具提示消息.

下载 EasyUI 实例: