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提供了丰富的事件和方法,如`submitHandler`(表单提交时触发)、`valid`(验证通过时触发)和`invalid`(验证失败时触发),可以帮助开发者在验证过程中进行更精细的控制。 现在,我们来看一...
在使用jQuery Validate 1.1.2时,你需要将对应的JS文件引入到项目中,并结合jQuery库一起使用。然后,你可以通过`.validate()`方法应用到表单元素上,再通过设置选项来定义验证规则和错误消息。例如: ```...
接下来,我们将深入探讨jQuery Validate的使用方法、核心概念以及如何结合其他脚本文件实现自定义验证。 首先,`jquery.js`是jQuery的核心库,它是jQuery Validate的基础,没有它,我们无法使用jQuery Validate。...
本篇文章将深入探讨jQuery Validate的依赖、核心功能、使用方法以及相关文档资源。 首先,jQuery Validate依赖于jQuery库,这意味着在使用该插件之前,你需要确保页面已经引入了jQuery。在项目中,你可以通过CDN...
本文将深入探讨jQuery Validate的使用方法、核心特性以及如何结合实际项目进行应用。 首先,jQuery Validate插件是基于流行的JavaScript库jQuery构建的,因此在使用之前,需要确保页面已经引入了jQuery。接着,我们...
在《jQuery Validate验证手册》中,你会找到详细的使用指南,包括如何初始化验证、如何定义验证规则、如何处理错误消息、如何与其他jQuery插件集成等内容。此外,手册还会介绍如何自定义验证插件,以适应不同项目的...
本文将深入探讨jQuery.validate的使用方法以及源码解析,帮助开发者更好地理解和运用这一工具。 首先,我们来了解一下jQuery.validate的基本用法。引入jQuery和jQuery.validate库后,我们可以通过调用`$("#formID")...
1. **覆盖默认样式**:jQuery Validate 使用`error`、`valid`和`help-block`等类来添加错误提示和验证状态。可以通过定义这些类的新样式来改变它们的外观。 2. **使用CSS**:创建自定义CSS规则,例如更改错误消息的...
jQuery Validate 插件是Web开发中广泛使用的工具,主要用于实现前端表单验证,它极大地简化了用户输入数据的检查过程,提供了丰富的验证规则和自定义方法。在这个“jQuery Validate插件验证表单小练”中,我们将深入...
7. **异步验证**:对于需要服务器验证的情况,`jQuery Validate`提供了一个`.ajax()`方法,可以在提交表单前发送请求,根据响应决定是否允许提交。 8. **验证插件的使用**:在实际项目中,你可能需要结合其他插件,...
### 使用方法 首先,确保引入jQuery库和修改版的`jquery.validate.js`。在表单元素上添加相应的验证规则,例如: ```html <!-- 其他表单元素... --> ``` 然后,在脚本中初始化验证: ```javascript $...
《jQuery Validate与Struts2整合应用详解》 在Web开发中,前端验证用户输入的数据是必不可少的一环,jQuery Validate插件就是一款强大的JavaScript验证工具,它可以帮助我们方便地实现表单验证。与此同时,Struts2...
jQuery Validate 插件的基本用法是首先在页面中引入jQuery库和validate插件的JavaScript文件。然后,为要验证的表单添加一个`id`属性,并在JavaScript代码中调用`.validate()`方法来初始化验证规则。例如: ```...
首先,我们需要了解jQuery Validate Plugin的基本用法。该插件是基于jQuery库的,因此在使用前需确保已经引入了jQuery。例如,可以引入如下的文件: ```html <script src="jquery-1.5.2.min.js"> <script src="...
1. **jQuery Validate 基本使用** jQuery Validate 插件首先需要引入 jQuery 库以及 validate.js 文件。在 HTML 页面中,通过 `$(document).ready()` 函数来初始化验证器,并调用 `.validate()` 方法应用到目标表单...
2. **初始化验证**:使用`jQuery`选择器找到需要验证的表单元素,并调用`.validate()`方法,配置相应的验证规则。例如,对于密码字段,可能有`required`(必填)、`minlength`(最小长度)和自定义的正则表达式规则...
jQuery Validate 是一个基于 ...在开始使用jQuery Validate之前,你需要在HTML页面中引入jQuery库和jQuery Validate插件的JavaScript文件。例如: ```html <script type="text/javascript" src="js/jquery-min.js"> ...
在本文中,我们将深入探讨如何使用jQuery Validate插件来创建一个功能完备的注册表单,进行数据提交前的验证。jQuery Validate是一个强大的JavaScript库,它为HTML表单提供了灵活且易于使用的验证规则,确保用户输入...
例如,使用 jQuery UI 创建交互式界面,jQuery Form 实现无刷新表单提交,jQuery Validate 确保数据输入正确,而 jQuery vsdoc 则在开发过程中提供文档支持。在实际项目中,开发者可以根据需求选择合适的插件组合,...