jQuery EasyUI使用教程之表单验证

2019独角兽企业重金招聘Python工程师标准>>>

本教程将向您展示如何验证一个表单。easyui框架提供一个validatebox插件来验证一个表单。在本教程中，我们将创建一个联系表单，并应用validatebox插件来验证表单,然后您可以根据自己的需求来调整这个表单。

jQuery EasyUI最新试用版下载请猛戳>>

点击查看示例

创建表单

让我们创建一个简单带有name、email、subject和message字段的联系表单：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<div style="padding:3px 2px;border-bottom:1px solid #ccc">Form Validation</div> <form id="ff" method="post"> <div> <label for="name">Name:</label> <input class="easyui-validatebox" type="text" name="name" required="true"> </div> <div> <label for="email">Email:</label> <input class="easyui-validatebox" type="text" name="email" required="true" validtype="email"> </div> <div> <label for="subject">Subject:</label> <input class="easyui-validatebox" type="text" name="subject" required="true"> </div> <div> <label for="message">Message:</label> <textarea name="message" style="height:60px;"></textarea> </div> <div> <input type="submit" value="Submit"> </div> </form>

我们添加一个样式名为easyui-validatebox到input标记中，所以input标记将根据validType属性应用验证。

当表单无效时阻止表单提交

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

1 2 3 4 5 6 7 8 9

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

如果表单是无效的，将显示一个提示信息。

下载EasyUI示例：easyui-form-demo.zip

有兴趣的朋友可以点击查看更多有关jQuery EasyUI的教程>>

转载于:https://my.oschina.net/u/2317468/blog/740212