jQuery验证插件validate使用方法详解

1. 写在前面

  我们知道,用户注册的时候,会有个表单页面,然后有些选项是必填的,有些要填的内容是有规范的,这些都要在用户提交之前进行验证才行,如果不符合要求,需要在右边显示一个友好的提示,让用户修改。   记得以前在学习Servlet的时候,实现一个简单的用户注册功能的验证是在后台做的,有些用了正则表达式,有些没用,但是都比较简单。流程是这样的,前台提交表单数据后,servlet获取数据先进行验证,如果不符合要求,将提示信息放到一个List中,然后再把List存到session中,跳转一个新的页面做回显,把错误信息也显示出来,但是比较繁琐。   前面做网上商城项目的时候,用EasyUI做后台商品添加时,也做了验证的功能,EasyUI自带了验证的功能,还是很强大的,效果也不错。感兴趣的话不妨来看一下。   但是前台用户注册的页面我们该如何做呢?这就是本文所要介绍的主要内容了,我们可以使用jQuery的Validate插件来做注册的验证功能,jQuery我也没有系统的学习,只是用到什么学什么,用到什么了解什么,所以如有错误之处,欢迎留言指正~下面我一步步通过代码详细介绍一下jQuery-Validate验证插件的使用步骤。

2. 效果展示

  首先来看一下最后实现的效果,先有个直观的感受,个人感觉还算可以的~能接受。

表单验证

  从图中可以看出,包括输入前的提示,输入正确和错误的提示的功能,都已经完成。再看一下我的工程:

工程文件

  总共有6个jsp文件,之所以写成6个是为了一步步解说做这个效果的步骤,最后terminal.jsp是最终版的。运行的时候也只需要运行这个terminal.jsp即可。 下面我详细分析一下使用jQurey-Validate验证插件的过程。

3. Validate环境的搭建

   环境搭建,肯定少不了jar包,我使用的是jQuery-validate-1.15,官方上给出了依赖的几个版本的jQuery,我下了jQuery-1.11.1。所以将这两个js文件放到工程中WebRoot/js中,并在jsp页面中导入即可。

demo1

   demo1.jsp很简单,为了搭建环境而已,如果点击提交,不会跳转到指定页面表示环境搭建成功。

4. Validate基本方法的使用

  好了,环境搭建成功了,接下来我们开始使用Validate的基本方法了,这里还要导入一个js文件:additional-methods.js,新版本的jQuery-validate-1.15中没有对文件后缀的验证,后来我在官网上查了一下,官网上说放到additional-methods.js中了,所以我去下了个,放到工程中了,而且方法名也和老版本不太一样,下面再说。看一下demo2.jsp: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

jquery validate验证

密码: 确认密码:
爱好: 上网: 邮箱:
头像:

  demo2中,我们写了一些基本的表单了,并且在js中对其进行了验证,validate中定义了一些缺省的验证,required表示必填字段,rangelength表示长度范围,用数组表示范围边界,equalTo后面跟一个id,表示跟后面跟的id的元素内容相同,这里说一下extension,表示后缀,以前版本叫accept,新版本中改为extension了,网上的搜索的关于后缀的验证都是accept,新版没了,而且extension就是在新加的additional-methods.js中。我们看一下这个版本的效果:

demo2

  有点丑……因为还没做css, 但是我直接点击提交,会出现一些验证信息了,这些都是默认的信息,是源码中提供的,说明一点,验证功能生效了,我们下面就改写一下后面显示的信息,这些默认的显然不太友好。

5. 实现错误消息的本地化

   我们可以指定messages消息的显示内容,也是json格式的,如下:

jquery validate验证

  相当于覆写了原来默认的消息提示,来看下效果:

demo3

  这就有点感觉了。继续往下完善。

6. 实现远程验证

  所谓远程验证,指的是当用户注册时输入用户名时,系统得从数据库中查询是否已经有该用户名了,如果有则告诉用户已经有人注册过了该名字了,但是我们不用去查数据库,我们写个Action模拟下即可,主要是实现validate插件和Action之间的通信。看demo4.jsp:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

jquery validate验证

  我们看到,在sname里面新加了个remote方法,这个是用来远程验证的,参数url是要发送的请求Action,所以我们后台写个AjaxAction,在AjaxAction中写过check方法来,判断用户名是否为admin,如果是,则以流的形式返回false,前台接收到false就会验证失败,返回true则验证成功。失败了则告诉用户该用户名已存在,后台Action这里就不写了,见我上传的源码即可。我们来看下效果:

demo4

7. 自定义验证方法

 

  我们也可以自定义验证的方法,比如手机号,我们可以自己定义验证方法,自己定义的方法最好写在扩展js中,我们自己写一个jquery.validate.extend.js放到js文件夹中,在该文件中写上:

},"手机号码不正确");

  addMethod表示新加的方法,第一个参数是方法名,第二个参数是函数体,第三个参数表示验证错误消息。其中函数体中,又有三个参数,value表示验证的值,element表示当前dom对象,param表示参数。我们使用正则表达式验证了手机号。这里就不测试了。最后我们来看一下终极的表单验证,终极验证表单需要加上CSS了,下面是完整的终极验证代码。

8. 验证表单完整版

8.1 Html表单

  为了让表单结构简单而清晰,我们将表单的每个元素都包裹在一个div结构中:用label标签用来标记元素的名称,接着便是表单元素本身。【注明:1.使用label标签的好处是为鼠标用户改进了可用性。当在label元素内点击文本时,浏览器就会自动将焦点转到和label相关的表单控件上。2.每个需要校验的表单元素都应该设置id和name属性,方便在使用插件时将元素绑定校验规则和校验信息。】

  表单实现代码如下:

<div class="jb51code">
<pre class="brush:xhtml;">
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

jquery validate验证 jQuery-Validate表单校验验证
上网:

8.2 表单验证js逻辑

  接着我们通过js来实现对表单元素的校验。在校验之前,我对jquery validate插件进行了功能扩展,对默认的选项进行了重写覆盖。jquery validate插件默认只提供了校验正确及错误时的提示,缺少我们常见的帮助信息提示。为了解决这个问题,我研究了插件的源码,发现插件本身提供了onfocusin(校验元素获得焦点时调用)和onfocusout(校验元素失去焦点时调用)这两个函数。通过修改默认参数的这两个接口,可以实现党用户鼠标点击或选择元素时(即元素获得焦点),提示帮助信息;在用户鼠标离开元素时(即元素失去焦点),移除帮助信息。   此外,jquery validate默认提供表单元素输入时的实时校验,因为我们要求在输入时只提示用户帮助信息,故需要关闭输入的实时校验,为此我们将默认参数中的onkeyup设置为null。   具体的扩展改进代码我放到了新增js脚本jquery.validate.extend.js中,代码如下:

<div class="jb51code">
<pre class="brush:js;">
/*插件新功能-设置插件validator的默认参数*****/
$.validator.setDefaults({
/关闭键盘输入时的实时校验/
onkeyup: null,/添加校验成功后的执行函数--修改提示内容,并为正确提示信息添加新的样式(默认是valid)/
success: function(label){
/label的默认正确样式为valid,需要通过validClass来重置,否则这里添加的其他样式不能被清除/
label.text('').addClass('valid');
},/重写校验元素获得焦点后的执行函数--增加[1.光标移入元素时的帮助提示,2.校验元素的高亮显示]两个功能点/
onfocusin: function( element ) {
this.lastActive = element;

/1.帮助提示功能/
this.addWrapper(this.errorsFor(element)).hide();
var tip = $(element).attr('tip');
//alert(tip);
if(tip && $(element).parent().children(".tip").length === 0){
$(element).parent().append("");
}

/2.校验元素的高亮显示/
$(element).addClass('highlight');

// Hide error label and remove error class on focus if enabled
if ( this.settings.focusCleanup ) {
if ( this.settings.unhighlight ) {
this.settings.unhighlight.call( this,this.settings.errorClass,this.settings.validClass );
}
this.hideThese( this.errorsFor( element ) );
}
},/重写校验元素焦点离开时的执行函数--移除[1.添加的帮助提示,2.校验元素的高亮显示]/
onfocusout: function( element ) {
/1.帮助提示信息移除/
$(element).parent().children(".tip").remove();

/2.校验元素高亮样式移除/
$(element).removeClass('highlight');

/3.替换下面注释的原始代码,任何时候光标离开元素都触发校验功能/
//this.element( element );

if ( !this.checkable( element ) && ( element.name in this.submitted || !this.optional( element ) ) ) {
this.element( element );
}
}
});

//自定义方法,完成手机号码的验证
//name:自定义方法的名称,method:函数体,"手机号码不正确");

8.3 表单验证css样式

  最后还要为页面元素添加css样式。插件中有一系列默认选项:其中默认错误显示标签为label,错误样式为label.error。上面在jquery.validate.extend.js文件中,有一个success函数需要说明一下。这个函数是在校验成功的时候执行的,我们在函数中为label提示标签添加了校验正确对应的样式label.valid。因此在css中如果要美化信息提示,需要对label相关样式如error,valid样式进行设计。此外我们在扩展插件功能中添加了一个class为tip的label标签,该标签仅在校验元素获得焦点时生成。为此,还需要设置label的tip样式。   完整的样式文件内容具体如下:

fieldset{ width: 650px; }

legend{
text-align: center;
font-size: 20px;
}

.item{
height: 56px;
line-height: 30px;
margin: 10px;
}

.item .item-label{
float: left;
width: 80px;
text-align: right;
}

.item-text{
float: left;
width: 240px;
height: 30px;
padding: 9px 25px 9px 5px;
margin-left: 10px;
border: 1px solid #ccc;
overflow: hidden;
}

.item-select{
float: left;
height: 30px;
border: 1px solid #ccc;
margin-left: 10px;
font-size: 14px;
padding: 6px 0px;
}

.item-file{
float: left;
height: 30px;
margin-left: 10px;
font-size: 14px;
padding: 6px 0px;
}

.item-submit{
float: left;
height: 30px;
width: 50px;
margin-left: 90px;
font-size: 14px;
}

input.error{
border: 1px solid #E6594E;
}

input.highlight{
border: 1px solid #7abd54;
}

label.error{
float: left;
height: 30px;
line-height: 30px;
font-size: 14px;
text-align: left;
margin-left: 5px;
padding-left: 35px;
color: red;
background: url('../image/error.png') no-repeat left center;
}

label.tip{
float: left;
height: 30px;
line-height: 30px;
font-size: 14px;
text-align: left;
margin-left: 5px;
padding-left: 35px;
color: #aaa;
background: url('../image/tip.png') no-repeat left center;
padding-left: 35px;
}

label.valid{
background: url('../image/valid.png') no-repeat left center;
}

  至此,表单验证就做好了,这里就不再展示了,看最前面即可。效果还可以,不过还可以更加完善,我对jQuery了解的也不太多,希望大家共同进步!

源码下载:

原文地址:nofollow" target="_blank" href="http://blog.csdn.net/eson_15/article/details/51497533">http://blog.csdn.net/eson_15/article/details/51497533

以上就是本文的全部内容,希望能给大家一个参考,也希望大家多多支持编程之家。

相关文章

页面搜索关键词突出 // 页面搜索关键词突出 $(function () {...
jQuery实时显示日期、时间 html: &lt;span id=&quot...
jQuery 添加水印 &lt;script src=&quot;../../../.....
中文:Sys.WebForms.PageRequestManagerParserErrorExceptio...
1. 用Response.Write方法 代码如下: Response.Write(&q...
Jquery实现按钮点击遮罩加载,处理完后恢复 思路: 1.点击按...