本站原创关于参考文献及规则及方式方面的免费优秀学术论文范文，参考文献有关毕业论文格式要求,关于jQuery.Validate在Web中的应用相关论文范文集，对写作参考文献论文范文课题研究的大学硕士、本科毕业论文开题报告范文和文献综述及职称论文参考文献资料下载有帮助。
摘 要 ：该文对表单验证插件jQuery.Validate做了简单的介绍对其使用方法、验证方式、以及错误提示信息的修改做了简单的介绍,并对其优点做了简要的分析.
关 键 词 ：Validate；验证；控件；Class；jQuery JaScript
中图分类号：TP311文献标识码：A文章编号：1009-3044(2012)26-6267-02
JQuery.Validate Application in Web
WANG Na, ZHU Xiu-qun, MA Qiang
(Xinjiang Wind Energy Institute, Urumqi 830000,China)
Abstract: The form validation jQuery.Validate made a brief introduction to the use of methods, validation, and error informa tion changes were briefly introduced, and the advantages to do brief analysis.
Key words: validate；verification；controls；class；jQuery；JaScript
jQuery.Validate插件是历史最悠久的jQuery插件之一,经过了全球众多项目的验证；它有很多的优点,比如：内置大量的验证规则、支持自定义验证规则、支持自定义验证信息提示等；而且它在实时验证方面的表现也很突出,更能实现无刷新实时验证的效果,这与传统的控件验证及后台验证相比,更加人性化了.
1 jQuery.Validate的使用方法
首先,将校验库引入到页面中,如下：
其次,为form进行验证注册
jQuery(document).ready(function(){
$("#form").validate(),
}),
最后,编写具体的验证代码
额定功率：
不需要拖控件、指定验证控件等啰嗦的代码,仅仅一个样式名就能实现验证,书写简单、易于操作,还可以根据需求自由的组合验证规则.
2 jQuery.Validate指定验证规则的验证方式
2.1书写class样式指定验证规则或属性验证规则
在控件中书写class的方式,这种验证方式书写非常的方便,只用几个属性就能轻松搞定多种验证,且可以根据需求自由的组合验证规则,比起.Net传统的验证方式更简单快捷,但这种方式许多高级验证都无法使用,且只能使用内置的消息,不能满足个性化需求.
举例如下：
年龄：
2.2以JSON格式书写class样式
同样是在控件中书写class的验证方式,但是书写方式是JSON格式,此方式支持自定义验证消息,增强了界面的友好性,并可以使用高级验证规则.
举例如下：
风机型号：
2.3调用validate()方法时传递字段的验证规则
采用纯JS的方式,很好的解决了HTML和验证规则的分离,将每个页面的验证规则都写在头部的脚本中,方便日后维护,但对于较多控件的页面书写较为麻烦；
举例如下：
$("#form").validate({
rules: { latanlong: {required: true, maxlengh: 20}
})
自定义验证规则只需定义相应的正则表达式即可实现相应的验证,实现非常方便；自定义验证是通过addMethod()方法实现的,语法如下：
jQuery.validator.addMethod( name, method, [message] )
参数name要添加的方法名,用于标识和引用,必须是一个有效的jascript标识符.
参数method方法的实现部分,返回true如果表单元素通过验证.
参数message(Optional)该方法的默认验证消息.
实例如下：
//字母下划线验证
jQuery.validator.addMethod("ischrline", function (value, element) {
return this.optional(element) || (/^((！_)[a-zA-Z_]+)$/.test(value)),
}, "只能由字母和下划线组成,且只能以字母开头"),
4错误提示信息
4.1更改错误信息显示的位置
默认情况下,错误消息是放在验证元素后面的,根据用户的需求,错误提示信息有时需统一放置在页面的正下方,如图1.
图1
要实现这个效果可以把若干文本框定义一个组groups,把几个地方的出错信息统一放在一个地方,代码如下：
$(".selector").validate(
{
groups: { username: "fname lname" },
errorPlacement: function(error, element) {
if (element.attr("name") 等于等于 "fname" || element.attr("name") 等于等于 "lname" )
error.insertAfter("#lastname"),
else error.insertAfter(element), }
})
4.2更改错误信息显示的样式
错误信息是被放在了一个label标签中,且有一个类样式error,只要修改label标签中的error定css样式即可设置错误提示的样式,具体代码如下：
label.error{
background: #ffcccc url(../Images/cancel_03.png) no-repeat 0px 0px,
color: Red,padding-left: 22px,
}
效果如图2所示.
5总结
本文对对jQuery.Validate的使用、自定义验证方法,错误信息的美化等做了详细的描述,上述方法及代码在电子标签、知识库等多个项目中进行了很好的的应用.