`

jQuery validate 用法

阅读更多
validate.js下载地址: http://plugins.jquery.com/project/validate
metadata.js下载地址: http://plugins.jquery.com/project/metadata

small tip:
引用
jquery必须在jquery.validate.js之前被引入,否则会报错


现在公司的常规写法 是 引入Jquery.validate.js后,在utils.js中统一写好function 并定义统一的validateForm 然后在页面直接使用 好处是可以统一代码 并且减少在单独页面的代码量。

jQuery validate 使用方法如下:

1.引入jQuery库和Validation插件
<script src="scripts/jquery-1.6.4.js" type="text/javascript"></script>  
<script src="scripts/jquery.validate.js" type="text/javascript"></script>  


2.确定哪个表单需要被验证
 <script type="text/javascript">  $("#commentForm").validate();  </script>


3.针对不同的字段,进行验证规则编码,设置字段相应的属性
class="required"   必须填写  
class="required email"        必须填写且内容符合Email格式验证  
class="url"             符合URL格式验证  
minlength="2"      最小长度为2  


可验证的规则有19种:
required:      必选字段  
remote:        "请修正该字段",  
email:         电子邮件验证  
url:           网址验证  
date:          日期验证  
dateISO:       日期 (ISO)验证  
dateDE:  
number:        数字验证  
numberDE:  
digits:        只能输入整数  
creditcard:    信用卡号验证  
equalTo:       ”请再次输入相同的值“验证  
accept:        拥有合法后缀名的字符串验证  
maxlength/minlength:    最大/最小长度验证  
rangelength:     字符串长度范围验证  
range:           数字范围验证  
max/min:         最大值/最小值验证  



注意 :
引用
将所有的与验证相关的信息写到class属性中方便管理 一般我们会引用一个新的jQuery插件---jquery.metadata.js(支持固定格式解析的jQuery插件)


1 引入新包
<script src="scripts/jquery.metadata.js" type="text/javascript"></script>  


2.改变调用的验证方法
<script type="text/javascript">  $("#commentForm").validate({meta: "validate"}); </script> 


3.将验证规则全部编写到class属性中
class="{validate:{required: true, minlength: 2, messages:{required:'请输入姓名', minlength:'请至少输入两个字符'}}}"  
class="{validate:{required: true, email: true, messages:{required:'请输入电子邮件', email:'请检查电子邮件的格式'}}}"       


也可以通过name属性来关联字段和验证规则的验证写法(验证行为和HTML结构完全脱钩)

$("#commentForm").validate({  
   rules: {  
      username: {  
         required: true,  
         minlength: 2  
      },  
      email: {  
         required: true,  
         email: true  
      },  
      url:"url",  
      comment: "required"  
   },  
   messages: {  
      username: {  
         required: '请输入姓名',  
         minlength: '请至少输入两个字符'  
      },  
      email: {  
         required: '请输入电子邮件',  
         email: '请检查电子邮件的格式'  
      },  
      url: '请检查网址的格式',  
      comment: '请输入您的评论'  
   }  
});  


国际化
Validation插件的验证信息默认语言是英文,如果要改成中文,只需要引入Validation提供的中文验证信息即可,引入代码如下:
<script src="scripts/jquery.validate.messages_cn.js" type="text/javascript"></script> 


自定义验证信息并美化
errorElement: "em",               //可以用其他标签,记住把样式也对应修改  
success: function(label) {    //label指向上面那个错误提示信息标签em  
      label.text("")                       //清空错误提示消息  
              .addClass("success");    //加上自定义的success类  
     }  

在CSS中添加样式与之关联 
em.error {  
      background:url("images/unchecked.gif") no-repeat 0px 0px;  
      padding-left: 16px;  
}  
em.success {  
      background:url("images/checked.gif") no-repeat 0px 0px;  
      padding-left: 16px;  
}  


自定义验证规则
//自定义一个验证方法  
$.validator.addMethod(  
    "formula", //验证方法名称  
    function(value, element, param) {//验证规则  
        return value == eval(param);  
    },   
    '请正确输入数学公式计算后的结果'//验证提示信息  
);  
  
$("#commentForm").validate({  
   rules: {  
      username: {  
         required: true,  
         minlength: 2  
      },  
      email: {  
         required: true,  
         email: true  
      },  
      url:"url",  
      comment: "required",  
      valcode: {  
         formula: "7+9"  
      }  
   },  
   messages: {  
      username: {  
         required: '请输入姓名',  
         minlength: '请至少输入两个字符'  
      },  
      email: {  
         required: '请输入电子邮件',  
         email: '请检查电子邮件的格式'  
      },  
      url: '请检查网址的格式',  
      comment: '请输入您的评论',  
      valcode: '验证码错误'  
   }  
});  
分享到:
评论

相关推荐

    jquery validate例子

    此外,jQuery Validate提供了丰富的事件和方法,如`submitHandler`(表单提交时触发)、`valid`(验证通过时触发)和`invalid`(验证失败时触发),可以帮助开发者在验证过程中进行更精细的控制。 现在,我们来看一...

    jQuery Validate 1.1.2

    在使用jQuery Validate 1.1.2时,你需要将对应的JS文件引入到项目中,并结合jQuery库一起使用。然后,你可以通过`.validate()`方法应用到表单元素上,再通过设置选项来定义验证规则和错误消息。例如: ```...

    jquery validate 表单验证

    接下来,我们将深入探讨jQuery Validate的使用方法、核心概念以及如何结合其他脚本文件实现自定义验证。 首先,`jquery.js`是jQuery的核心库,它是jQuery Validate的基础,没有它,我们无法使用jQuery Validate。...

    jquery validate依赖包及其帮助文档.rar

    本篇文章将深入探讨jQuery Validate的依赖、核心功能、使用方法以及相关文档资源。 首先,jQuery Validate依赖于jQuery库,这意味着在使用该插件之前,你需要确保页面已经引入了jQuery。在项目中,你可以通过CDN...

    jQueryValidate.rar

    本文将深入探讨jQuery Validate的使用方法、核心特性以及如何结合实际项目进行应用。 首先,jQuery Validate插件是基于流行的JavaScript库jQuery构建的,因此在使用之前,需要确保页面已经引入了jQuery。接着,我们...

    jquery validate 验证手册

    在《jQuery Validate验证手册》中,你会找到详细的使用指南,包括如何初始化验证、如何定义验证规则、如何处理错误消息、如何与其他jQuery插件集成等内容。此外,手册还会介绍如何自定义验证插件,以适应不同项目的...

    jQuery.validate 用法

    本文将深入探讨jQuery.validate的使用方法以及源码解析,帮助开发者更好地理解和运用这一工具。 首先,我们来了解一下jQuery.validate的基本用法。引入jQuery和jQuery.validate库后,我们可以通过调用`$("#formID")...

    jQuery validate 自定义样式、规则

    1. **覆盖默认样式**:jQuery Validate 使用`error`、`valid`和`help-block`等类来添加错误提示和验证状态。可以通过定义这些类的新样式来改变它们的外观。 2. **使用CSS**:创建自定义CSS规则,例如更改错误消息的...

    jQuery Validate插件验证表单小练

    jQuery Validate 插件是Web开发中广泛使用的工具,主要用于实现前端表单验证,它极大地简化了用户输入数据的检查过程,提供了丰富的验证规则和自定义方法。在这个“jQuery Validate插件验证表单小练”中,我们将深入...

    jquery validate的漂亮css样式验证

    7. **异步验证**:对于需要服务器验证的情况,`jQuery Validate`提供了一个`.ajax()`方法,可以在提交表单前发送请求,根据响应决定是否允许提交。 8. **验证插件的使用**:在实际项目中,你可能需要结合其他插件,...

    Jquery Validate修改版

    ### 使用方法 首先,确保引入jQuery库和修改版的`jquery.validate.js`。在表单元素上添加相应的验证规则,例如: ```html &lt;!-- 其他表单元素... --&gt; ``` 然后,在脚本中初始化验证: ```javascript $...

    jquery validate配合struts2简单整改

    《jQuery Validate与Struts2整合应用详解》 在Web开发中,前端验证用户输入的数据是必不可少的一环,jQuery Validate插件就是一款强大的JavaScript验证工具,它可以帮助我们方便地实现表单验证。与此同时,Struts2...

    jquery validate 最稳定版本

    jQuery Validate 插件的基本用法是首先在页面中引入jQuery库和validate插件的JavaScript文件。然后,为要验证的表单添加一个`id`属性,并在JavaScript代码中调用`.validate()`方法来初始化验证规则。例如: ```...

    关于jquery validate plugin 指定需要验证对象解决方案

    首先,我们需要了解jQuery Validate Plugin的基本用法。该插件是基于jQuery库的,因此在使用前需确保已经引入了jQuery。例如,可以引入如下的文件: ```html &lt;script src="jquery-1.5.2.min.js"&gt; &lt;script src="...

    jQuery validate框架的个性化验证

    1. **jQuery Validate 基本使用** jQuery Validate 插件首先需要引入 jQuery 库以及 validate.js 文件。在 HTML 页面中,通过 `$(document).ready()` 函数来初始化验证器,并调用 `.validate()` 方法应用到目标表单...

    jquery.validate表单验证密码完整例子(带密码强度显示)

    2. **初始化验证**:使用`jQuery`选择器找到需要验证的表单元素,并调用`.validate()`方法,配置相应的验证规则。例如,对于密码字段,可能有`required`(必填)、`minlength`(最小长度)和自定义的正则表达式规则...

    jquery validate中文教程

    jQuery Validate 是一个基于 ...在开始使用jQuery Validate之前,你需要在HTML页面中引入jQuery库和jQuery Validate插件的JavaScript文件。例如: ```html &lt;script type="text/javascript" src="js/jquery-min.js"&gt; ...

    jquery validate表单验证插件制作注册表单提交验证

    在本文中,我们将深入探讨如何使用jQuery Validate插件来创建一个功能完备的注册表单,进行数据提交前的验证。jQuery Validate是一个强大的JavaScript库,它为HTML表单提供了灵活且易于使用的验证规则,确保用户输入...

    Jquery插件,JqueryUI,JqueryForm,JqueryValidate,Jqueryvsdoc

    例如,使用 jQuery UI 创建交互式界面,jQuery Form 实现无刷新表单提交,jQuery Validate 确保数据输入正确,而 jQuery vsdoc 则在开发过程中提供文档支持。在实际项目中,开发者可以根据需求选择合适的插件组合,...

Global site tag (gtag.js) - Google Analytics