`
HuNanPengdake
  • 浏览: 236846 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

Jquery-validation表单验证使用方法

阅读更多
作用

jquery.validate是jquery旗下的一个验证框架,借助jquery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法,并且对国际化也有很好的支持。

使用前的布置

说明:需要JQuery版本:1.2.6+

步骤:

要导入相应的jQuery.js与jquery.validate.js文件
<script type="text/javascript" src="${ctx}/js/jquery.validation/jquery.validate.js"></script>
<script type="text/javascript" src="${ctx}/js/jquery.validation/messages_cn.js"></script>

在相应的字段上指定验证规则
名称 *<input type="text" name="loginName" class="required">
其中class="required"代表本字段必须要输入数据

指定要对表单进行验证
<script type="text/javascript">

$(function(){

$("#testForm").validate();

});

</script>


基础知识

指定验证规则的方式

把验证规则写到字段元素的class属性中

例:

名称 * <input type="text" name="loginName" class="required"><br>

密  *  <input type="password" name="password" class="required"><br>

再次输入 <input type="password" name="password2"

class="{equalTo: '[name=password]'} required"><br>

生日   <input type="text" name="birthday" class="dateISO"><br>

E-mail *<input type="text" name="email" class="email"><br>

PAR(zip)<input type="file" name="resource" class="{accept: 'zip'}">



说明:

如果使用class="{key:value,…}"的方式,必须引入:jquery.metadata.js

表单字段的name不能重复,否则所配置的验证不起作用。

调用validate()方法时传递字段的验证规则

[color=red]$(function() {

$("#testForm").validate({

rules: {

loginName:{

required: true,

minlength: 2

}   ,

password: {

required: true

},

password2: {

equalTo: "input[name=password]"

}

}

});

});


内置的验证规则







required:true             


必填字段

remote:"check.php"        


使用ajax方法调用check.php验证输入值

email:true                


必须输入正确格式的电子邮件

url:true                  


必须输入正确格式的网址

date:true                 


必须输入正确格式的日期

dateISO:true               


必须输入正确格式的日期(ISO),例如:2010-01-01,2010/01/01 只验证格式,不验证有效性

number:true               


必须输入合法的数字(负数,小数)

digits:true               


必须输入整数

creditcard:               


必须输入合法的信用卡号

equalTo:"#field"         


输入值必须和$(“#field”)相同

accept: "gif|png|jpg"


输入拥有合法后缀名的字符串(上传文件的后缀),多个后缀之间用’|’隔开

maxlength:5              


输入长度最多是5的字符串(汉字算一个字符)

minlength:3             


输入长度最小是3的字符串(汉字算一个字符)

rangelength:[5,10]       


输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)

range:[5,10]             


输入值必须介于 5 和 10 之间

max:5                     


输入值不能大于5

min:10                   


输入值不能小于10






说明:

remote是远程验证:比如注册验证用户名是否已被注册,返回值只能是true(验证成功)或false(验证失败)。在访问指定的url时,会自动把当前字段的值做为参数(以字段name为key)传递过去。

某些属性值中的引号不能省略,否则出错。如accept、equalTo等。



remote使用时遇到的问题:添加用户时需要验证用户名是否存在,当添加上一个用户后,在不离开该页面的情况下,再次添加该用户名的用户,validate不能提示该用户已存在,因为缓存的原因,jquery仍认为该用户名可用。解决方法是在页面中添加:$().ready(function(){

$.ajaxSetup ({

cache: false //关闭AJAX相应的缓存

}); // 关闭缓存功能

});

添加



修改错误信息提示位置:

修改Jquery validate 的错误提示位置,把错误提示在input内,当获得鼠标焦点的时候清楚提示信息。
    具体使用方法:
var validator = $("#myContainerForm").validate({
focusCleanup:true,//clear the error message when the error element get focus again.
onkeyup:false,
errorPlacement: function(error, element) {
showErrorMesssgeDiv(error,element);
   }, 
rules:{
       name:{
              required: true
       }
},
messages: {
       name:{
              required:populateErrorMessage($("#errorRequiredMessage").val(),               $("#containerNameTitle").val())
       }    
}
});

自定义验证规则

除了内置的验证规则,validation还允许自定义验证规则。这是通过validation的addMethod()方法实现的,语法 为:

jQuery.validator.addMethod("name",function,message)

其中:

name为验证规则的名称

function定义验证的规则。参数有?。返回值为?。

message是验证失败时的提示信息。

指定错误提示内容

更改默认的提示内容

jQuery.extend(jQuery.validator.messages, {

required: "必填字段",

remote: "请指定一个不重复的值",

email: "请输入正确格式的电子邮件",

url: "请输入合法的网址",

date: "请输入合法的日期",

dateISO: "请输入合法的日期 (ISO).",

number: "请输入合法的数字",

digits: "只能输入整数",

creditcard: "请输入合法的信用卡号",

equalTo: "请再次输入相同的值",

accept: "请输入拥有合法后缀名的字符串",

maxlength: jQuery.validator.format("允许的最大长度为 {0} 个字符"),

minlength: jQuery.validator.format("允许的最小长度为 {0} 个字符"),

rangelength: jQuery.validator.format("允许的长度为{0}和{1}之间"),

range: jQuery.validator.format("请输入介于 {0} 和 {1} 之间的值"),

max: jQuery.validator.format("请输入一个最大为 {0} 的值"),

min: jQuery.validator.format("请输入一个最小为 {0} 的值")

});

个别表单改变提示内容(只对当前表单有效)

方法一:

<input type="file" name="parResource"

class="{required: true, accept: 'zip', messages: {required: '请选择文件', accept:'请选择正确的文件'}}">



方法二:

$(function() {

$("#testForm").validate({

messages:{

loginName: {

required: "必选字段2"

},

email: {

required: '必选字段22',

email: "请输入正确格式的电子邮件2"

}

}

});

});

改变错误消息显示样式

指定label.error的样式就可以了,如下:

<style type="text/css">

label.error{

margin-left: 10px;

color: red;

}

</style>



说明:label.error指class为error的label元素,如:<label for="resource" class="error">

扩展使用

怎么让错误提示信息显示到指定的位置

validation表单验证插件.doc
[/color]
分享到:
评论

相关推荐

    jQuery-validation-1.14.0 官方源代码(2015.09.13)

    jQuery-validation 是一个广泛使用的JavaScript库,专门用于实现前端表单验证。1.14.0版本在2015年9月13日发布,它提供了强大的功能,帮助开发者轻松地创建具有输入格式判别、条件输入识别和验证通过的用户界面。...

    jquery-validation-1.19.1.zip

    jQuery-validation是Web开发中常用的客户端表单验证插件,其1.19.1版本的发布为开发者提供了更稳定和高效的服务。该压缩包“jquery-validation-1.19.1.zip”包含了完整的源码、库文件、示例、测试用例以及相关文档,...

    jquery-validation-1.11.1.zip

    而`jquery-validation`则是jQuery生态中的一款强大插件,用于表单验证,帮助开发者创建用户友好的、功能丰富的表单验证系统。`jquery-validation-1.11.1.zip`这个压缩包包含了该插件的源码、文档和示例,是深入理解...

    jQuery-validation.rar

    总之,jQuery-validation是一个强大而灵活的工具,能够帮助开发者轻松实现表单验证,提升网站或应用程序的质量和用户体验。通过不断学习和实践,你可以将这个插件运用得更加娴熟,为项目开发带来便利。

    jquery-validation.zip

    jQuery验证插件,以"jquery-validation"为名,是Web开发中广泛使用的客户端表单验证库。它极大地简化了网页表单数据验证的过程,提高了用户体验,使得开发者无需编写复杂的JavaScript代码即可实现对用户输入的有效性...

    表单验证JQ插件jquery-validation.js

    表单验证JQ插件jquery-validation.js

    jquery-validation 网页表单验证js

    综上所述,`jQuery-validation`是一个强大且灵活的表单验证工具,能够帮助开发者快速构建具有高质量用户体验的表单验证功能。它的核心在于其易于理解和使用的API,以及丰富的验证规则和自定义选项,使得开发者可以...

    jquery-validation-1.8.1里面有很多例子

    本篇文章将围绕"jquery-validation-1.8.1"这个版本,深入探讨该插件的核心功能、使用方法以及提供的多个示例。 jQuery Validation插件由Jörn Zaefferer创建,它通过添加CSS类和错误消息到表单元素,实现了直观且...

    jquery-validation

    jquery-validation-1.9.0是一款优秀的form表单验证插件,此资源主要为某篇博客服务,如有需要还请下载。整个压缩包无法上传,有需要请留言

    jquery-validation-1.8.0下载

    本篇文章将围绕"jquery-validation-1.8.0"这一版本进行详细介绍,并探讨其核心功能、使用方法以及常见应用场景。 一、jQuery Validation插件概述 jQuery Validation插件是基于jQuery库的一个扩展,它使得在网页中...

    jquery-validation输出漂亮验证信息

    jQuery-validation是一个流行的JavaScript库,用于实现客户端表单验证。原生的jQuery-validation在验证失败时,其显示的信息可能并不直观或者不够友好,这可能会对用户的体验产生负面影响。因此,我们需要对其进行...

    jQuery-Validation-Engine-master

    jQuery Validation Engine是一款强大的jQuery插件,专用于表单验证。这款控件以其丰富的功能、高度的自定义性和优雅的用户界面而备受推崇。在本文中,我们将深入探讨jQuery Validation Engine的核心概念、安装步骤、...

    jquery-validation-1.14.0.zip(5.14.1)

    jQuery Validation 是一个广泛使用的前端JavaScript库,专为简化HTML表单验证而设计。它提供了一套完整的功能,使开发者能够快速有效地实施表单验证,确保用户输入的数据满足预设的规则。这个插件是基于jQuery库的,...

    jquery-validation使用

    jQuery Validation插件是用于在网页表单验证中提供方便、强大的功能的工具。它简化了对用户输入数据的检查,确保数据的完整性和正确性,从而提高了用户体验。这个插件是基于jQuery库构建的,因此在使用前需要先引入...

    jquery-validation插件

    总结,jQuery Validation插件以其简单易用、功能丰富的特性,成为开发人员处理表单验证的首选工具。通过自定义验证规则和消息,以及灵活的事件处理,我们可以创建出符合项目需求的高效验证机制,从而提升网站的用户...

    jquery-validation-unobtrusive-master

    总结来说,jQuery Validate 和其无侵入式版本是开发高效、用户友好的Web表单验证解决方案的重要工具。它们简化了客户端验证的过程,提升了应用的质量和用户体验。对于ASP.NET MVC开发者来说,jQuery Validate ...

    jQuery Validation 1.19.1表单验证 2020年 最新完整版 官方网站下载

    jQuery Validation Plugin v1.19.1 表单验证插件 2020年官方最新版。包含中文语言包messages_zh.js及jquery.validate.js,在dist目录中。

    Java Web Jquery表单验证

    2、掌握Jquery-validate表单验证插件的使用,了解表单验证的实现原理 实现一个基于Jquery的表单验证插件。 1、初步运用了Jquery框架进行编程,基本掌握Jquery框架的使用。 2、熟练使用Jquery-validate表单验证插件,...

    jquery-validation-1.17.0

    jQuery Validation是Web开发中一个广泛使用的JavaScript库,主要用于表单验证。该插件以其简单易用和强大的功能著称,大大简化了前端数据验证的过程。在本文中,我们将深入探讨jQuery Validation 1.17.0版本的相关...

    jquery-validation-1.15.0

    jQuery Validation Plugin 是一个广泛使用的开源插件,用于在客户端进行表单验证,提高用户交互体验。版本1.15.0是该插件的一个稳定版本,提供了丰富的功能和改进。 **主要功能** 1. **自动验证**:该插件可以自动...

Global site tag (gtag.js) - Google Analytics