`
望月怀远
  • 浏览: 57788 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

jquery.validat验证插件的应用

阅读更多

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

0
1
分享到:
评论

相关推荐

    jQuery验证控件jquery.validate.js使用说明+中文API

    jQuery 验证控件 jquery.validate.js 是一个功能强大且广泛使用的 JavaScript 验证插件,旨在帮助开发者快速实现表单验证功能。下面是 jquery.validate.js 的使用说明和中文 API。 导入 jQuery 库和 jquery....

    jquery.validate验证快速上手

    `jQuery Validate` 是一个非常流行的前端表单验证插件,它基于 jQuery 开发,提供了丰富的验证规则和高度定制化的错误消息处理机制。通过使用 `jQuery Validate`,开发者能够轻松地实现对表单输入的有效性检查,提高...

    解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法

    在使用jQuery Validate插件进行表单验证时,可能会遇到一个问题:当某个字段首次验证通过,然后在后续的验证中未通过时,之前验证成功的标记(例如√)仍然显示在对应的`&lt;label&gt;`元素上,而没有正确地更新为错误状态...

    jquery.validate

    `jquery.validate`是一款用于前端页面表单验证的强大插件。它可以帮助开发者快速实现表单字段的有效性检查,提高用户体验的同时减少服务器端的压力。该插件支持多种验证规则,并且可以自定义错误提示信息,使得开发...

    jQuery validate 验证radio实例

    本文主要介绍如何使用jQuery Validate插件来验证单选按钮(radio)的输入,并提供了一些具体的代码示例。 在使用jQuery Validate插件进行radio验证之前,需要在页面中引入jQuery库以及jQuery Validate插件。然后,...

    jquery 校验的文档

    ### jQuery校验插件知识点详解 ...通过上述介绍,我们可以看到jQuery Validate插件的强大之处在于其丰富的内置校验规则及可自定义的提示信息,这些特性极大地简化了前端表单验证的工作流程,提高了开发效率。

    jquery-form-validator-plugin:Jquery 表单验证插件

    jquery-form-validator-plugin :用于字段验证。 使用简单的节点 js 服务器进行设置 下面是关于演示应用程序的草稿。 前端框架草案: Bootstrap CSS ... public/js/formvalidator.js – form validat

    jQuery Validate表单验证入门学习

    jQuery Validate是一个广泛使用的jQuery插件,它提供了一套丰富的表单验证方法,极大地简化了客户端的表单验证过程。它支持常见的验证规则,比如电子邮件和URL验证,同时也允许开发者自定义验证规则。 在开始使用...

    自动化表单验证+qTip提示实例.zip

    在本文中,我们将深入探讨如何使用jQuery实现自动化表单验证,并结合qTip工具提示来创建一个用户友好的交互体验。这个实例是基于一个留言模板,旨在提供一种验证方法,它既简洁又具有广泛的适用性。 首先,让我们...

    verifyemail-jquery-plugin:一个简单的jQuery插件来显示http的功能

    BakBak的高级jQuery电子邮件地址验证器一个简单的jQuery插件,显示功能。有关此功能的更多详细信息,请参见 给定任意地址,BakBak / VerifyEmail将基于以下条件验证地址: 语法检查(RFC定义的语法)DNS验证拼写检查...

    lift-validate:提升输入验证模块

    提升验证模块 Web框架的输入验证模块。 该模块使用插件进行客户端验证。 服务器端验证也是可用的。 提供了以下验证器: ValidateRequired-值是必需的。 ValidateNumber-值是正数或负数。... Validat

Global site tag (gtag.js) - Google Analytics