请选择 进入手机版 | 继续访问电脑版
  • 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

jQuery EasyUI 表单 – 表单验证

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

jQuery EasyUI 表单 - 表单验证

本节将介绍jQuery EasyUI的表单验证是如何实现的,EasyUI框架提供一个validatebox插件来验证一个表单。

下述的示例将向您展示如何验证一个表单,我们将创建一个联系表单,并应用validatebox插件来验证表单。然后您可以根据自己的需求来调整这个表单。

创建表单(form)

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

	<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"></input>
		</div>
		<div>
			<label for="email">Email:</label>
			<input class="easyui-validatebox" type="text" name="email" required="true" validType="email"></input>
		</div>
		<div>
			<label for="subject">Subject:</label>
			<input class="easyui-validatebox" type="text" name="subject" required="true"></input>
		</div>
		<div>
			<label for="message">Message:</label>
			&lt;textarea name="message" style="height:60px;"&gt;&lt;/textarea&gt;
		</div>
		<div>
			<input type="submit" value="Submit">
		</div>
	</form>

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

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

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

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

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

下载 jQuery EasyUI 实例

jeasyui-form-form3.zip


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
jQuery EasyUI 表单 – 创建树形下拉框(ComboTree)发布时间:2022-01-28
下一篇:
jQuery EasyUI 表单 – 创建异步提交表单发布时间:2022-01-28
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap