在最近一个项目中,选择了以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的使用可以参考官方文档,下面附件有