在最近一个项目中,选择了以jquery.validat插件作为表单验证框架,感觉用起来不费劲,扩展性很好
下面以一个例子说明一下:
先在页面中引入jquery.js,jquery.validate.min.js,messages_cn.js(这个是中文提示信息扩展文件),validate.css,这些文件在附件里面都有。
以下写出主要的代码片段:
html片段:
<form id="roleForm" method="post" name="roleForm" action="role.do?method=save">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>角色名称:</td>
<td>
<input type="text" name="name" />
</td>
</tr>
<tr>
<td>角色描述:</td>
<td>
<textarea name="description" cols="40" rows="3"></textarea>
</td>
</tr>
<tr>
<td colspan="4">
<input name="save" type="submit" value="保存" />
<input name="reset" type="reset" value="重置" />
</td>
</tr>
</table>
</form>
js片段:
var validate = $("#roleForm").validate({
debug : false, //true为启动debug模式,即不提交表单
rules :{
name : {
required : true,
maxlength : 128,
remote : {url:window.ctx+ "/role.do?method=checkRoleName",
type:"post",
data:{oldName:function(){return $("[name=oldName]").val();}}//远程验证
}
},
description : {
maxlength : 512
}
},
messages :{
name :{
remote : "该角色名已经存在"
}
},
submitHandler : function(form){ //提交事件捕捉
form.submit();
return;
}
});
就这么的简单就用起来了!
具体jquery.validate 的api的使用可以参考官方文档,下面附件有
分享到:
相关推荐
jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery...
jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....
jquery.validate1.7验证插件最新版!
jquery.multiselect 下拉多选插件 下拉复选框插件 可以直接使用的demo
Jquery.fullpage全屏轮播插件,修复左右轮播时,会直接跳转到第一张图片的问题
jquery.validate表单验证密码完整例子(带密码强度显示)
jquery.min.js插件,实际运用项目中还是很好用。分享出来大家一起共享,如果大家觉得不错,希望能给个好评。
基于jquery.print.js插件的js打印demo,简单易用,使用详细教程请查看我的个人主页的博客《一款很好用的Jquery 打印插件——jQuery.print.js》
jquery.fireworks.js 插件描述:jquery-fireworks.js是一款基于HTML5 Canvas的逼真烟花特效jQuery插件。该插件使用简单,并可自由进行配置。它可以在一个div容器中生成逼真的燃放...
jquery.qrcode.min.js 二维码的jquery插件
jquery.easypiechart.js插件
jquery.countdown倒计时插件下载_翻牌倒计时器特效 jquery.countdown倒计时插件下载_翻牌倒计时器特效 jquery.countdown倒计时插件下载_翻牌倒计时器特效
Jquery.media.js插件,包含三个文件:jquery.media.js、jquery-1.7.2.min.js、demo.html demo文件如下: <html> <head> [removed][removed] [removed][removed] [removed] $(function() { $('....
jquery.layout 布局插件精简版,对依赖ui.core和拖拽进行精简
jQuery表单验证插件 jQuery.validity
jquery.media.js 插件 可以在html网页预览和查看pdf文件
一款支持3种不同切换效果的jQuery焦点图插件。演示地址:http://www.datouwang.com/jiaoben/256.html
jQuery .range.js是一个基于jQuery 的双滑块选择插件demo
jquery多风格多功能滚动特效代码插件jquery.liMarquee.js下载
jquery.json-2.3.min.js和jquery.json-2.3.js jQuery为开发插件提拱了两个方法,分别是:jQuery.extend(object); 为扩展jQuery类本身 jQuery.fn.extend(object);给jQuery对象添加方法。