jquery.validat验证插件的应用-优快云博客

本文介绍了一个使用jQuery.validate插件进行表单验证的实际案例。通过简单的代码实现对表单字段的必填、长度限制及远程唯一性验证等功能，并提供中文提示信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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