你的位置:首页 > Java教程

[Java教程]jquery validate 表单验证插件


2016-09-0611:13:55

对于初学者而言,html表单验证是一项极其琐碎的事情。要做好表单验证,需要准备以下基本要素:

  1.html表单结构:包含需要校验的表单元素;

  2.js逻辑控制:在需要校验的表单元素上绑定事件,如点击、获取焦点、失去焦点等事件,并设置这些事件对应的执行函数;

  3.css样式设置:针对需要校验的表单元素,需要设置默认的初始样式,以及触发元素绑定事件后的变化样式。

  这3类基本要素中,html表单结构的创建相对简单。表单验证的重点和难点在于如何利用js及时有效地提醒用户有关表单操作的信息。这里我参考了百度,163邮箱,京东等知名互联网企业的注册页面,归纳出表单验证需要的主要提示信息分类如下:

  1.表单元素获取焦点后的帮助信息(插件中对应class名"tip");

  2.表单元素验证通过时的成功信息(插件中对应class名"valid");

  3.表单元素验证失败时的错误信息(插件中对应class名"error")。

 

  如果不借助任何插件,我们需要花费大量的时间去编写不同类型的信息提示,考虑各种样式间的来回切换,以及编写一些基本的验证规则。名言曰:"我 之所以看得更远,是因为我站在巨人的肩膀上"。何不直接利用一些已有的成熟插件,来帮助我们快速的编写一个表单验证功能,这样既能提高效率,又能让我们抽 出时间专注于我们自己的逻辑

  在众多表单验证插件中,jquery validate插件是历史最悠久的jQuery插件之一,经过了全球范围内不同项目的验证。它的特点如下:

  1.内置验证规则:拥有必填、数字、email、url和信用卡号码等内置验证规则;

  2.自定义验证规则:可以很方便地自定义验证规则(通过$.validator.addMethod(name,method,message)实现);

  3.简单强大的验证信息提示:默认了验证信息提示,并提供自定义覆盖默认信息提示的功能(通过设置插件中的message参数来实现);

  4.实时验证:可以通过keyup或blur事件触发验证,而不仅仅在表单提交的时候验证。

  下面我们选择该插件,来实现一个简单而漂亮的表单验证例子。

jquery validate插件实现表单验证的小例子

在引入jquery validate插件前,需要先引入它所依赖的文件jquery.js(例子中jquery的版本为1.9);在实现的过程中,为了更好地效果,我在 jquery.validate.extend.js文件中对jquery validate原有的功能进行了扩展,并修改了相关默认选项;因此在文档头部需要引入的文件有三个:

<script src="jquery.js"></script><script src="lib/jquery.validate.min.js"></script><script src="lib/jquery.validate.extend.js"></script>

 

表单html

  表单验证3要素中,首先需要完成html表单结构代码的编写。为了让表单结构简单而清晰,我们将表单的每个元素都包裹在一个div结构中:用 label标签用来标记元素的名称,接着便是表单元素本身。【注明:

1.使用label标签的好处是为鼠标用户改进了可用性。当在label元素内点击文 本时,浏览器就会自动将焦点转到和label相关的表单控件上。

2.每个需要校验的表单元素都应该设置id和name属性,方便在使用插件时将元素绑定校 验规则和校验信息。

  表单实现代码如下:

<form action="#" method="post" id="regForm">
    <fieldset>
        <legend>jquery-validate表单校验验证</legend>
        <div >
            <label for="username" >用户名:</label>
            <input type="text" id="username" name="username" placeholder="设置用户名"
            autocomplete="off" tip="请输入用户名">
        </div>
        <div >
            <label for="password" >密码:</label>
            <input type="password" id="password" name="password" placeholder="设置密码"
            tip="长度为6-16个字符">
        </div>
        <div >
            <label for="password" >确认密码:</label>
            <input type="password" name="repassword" placeholder="设置确认密码">
        </div>
        <div >
            <label for="amt" >金额:</label>
            <input type="text" id="amt" name="amt" placeholder="交易金额"
            tip="交易金额必须大于0,且最多有两位小数">
        </div>
        <div >
            <input type="submit" value="提交" >
        </div>
    </fieldset>
</form>

 

2.2 表单验证js逻辑

  接着我们通过js来实现对表单元素的校验。在校验之前,我对jquery validate插件进行了功能扩展,对默认的选项进行了重写覆盖

jquery validate插件默认只提供了校验正确及错误时的提示,缺少我们常见的帮助信息提示

为了解决这个问题,我仔细研究了插件的源码,发现插件本身提供了onfocusin(校验元素获得焦点时调用)和onfocusout(校验元素失去焦点时调用)这两个函数。通过修改默认参数的这两个接口,可以实现党用户鼠标点击或选择元素时(即元素获得焦点),提示帮助信息;在用户鼠标离开元素时(即元素失去焦点),移除帮助信息。

  此外,jquery validate默认提供表单元素输入时的实时校验,因为我们要求在输入时只提示用户帮助信息,故需要关闭输入的实时校验,为此我们将默认参数中的onkeyup设置为null。

  具体的扩展改进代码我放到了新增js脚本jquery.validate.extend.js中,代码如下:

 1 /*******************************插件新功能-设置插件validator的默认参数*****************************************/ 2 $.validator.setDefaults({ 3   /*关闭键盘输入时的实时校验*/ 4   onkeyup: null, 5   /*添加校验成功后的执行函数--修改提示内容,并为正确提示信息添加新的样式(默认是valid)*/ 6   success: function(label){ 7     /*label的默认正确样式为valid,需要通过validClass来重置,否则这里添加的其他样式不能被清除*/ 8     label.text('').addClass('valid'); 9   },10   /*重写校验元素获得焦点后的执行函数--增加[1.光标移入元素时的帮助提示,2.校验元素的高亮显示]两个功能点*/11   onfocusin: function( element ) {12     this.lastActive = element;13     14     /*1.帮助提示功能*/15     this.addWrapper(this.errorsFor(element)).hide();16     var tip = $(element).attr('tip');17     if(tip && $(element).parent().children(".tip").length === 0){18       $(element).parent().append("<label class='tip'>" + tip + "</label>");19     }20     21     /*2.校验元素的高亮显示*/22     $(element).addClass('highlight');23 24     // Hide error label and remove error class on focus if enabled25     if ( this.settings.focusCleanup ) {26       if ( this.settings.unhighlight ) {27         this.settings.unhighlight.call( this, element, this.settings.errorClass, this.settings.validClass );28       }29       this.hideThese( this.errorsFor( element ) );30     }31   },32   /*重写校验元素焦点离开时的执行函数--移除[1.添加的帮助提示,2.校验元素的高亮显示]*/33   onfocusout: function( element ) {34     /*1.帮助提示信息移除*/35     $(element).parent().children(".tip").remove();36 37     /*2.校验元素高亮样式移除*/38     $(element).removeClass('highlight');39     40     /*3.替换下面注释的原始代码,任何时候光标离开元素都触发校验功能*/41     this.element( element );42     43     /*if ( !this.checkable( element ) && ( element.name in this.submitted || !this.optional( element ) ) ) {44       this.element( element );45     }*/46   }47 });

  完善插件的功能后,现在就是重头戏——使用插件为表单元素绑定校验规则和校验信息。

jquery validate插件提供validate方法实现form表单的元素校验,该方法的参数是一个包含键值对的对象。

其中最常用的键有rules(为不同元素定义校验规则),messages(为不同元素定义错误提示信息),success(校验正确后的字符串或者是执行函数)

常见的校验规则有:required(是否必填),minlength(最小长度),maxlength(最大长度),email(email格式规 则),url(url格式规则),date(date格式规则),rangelength(给定长度范围规则),equalTo(要求元素等于另一元素例 如equalsTo:"#password")。

 

下面的代码呈现了如何对表单中的用户名、密码等字段绑定校验规则

<script>$(document).ready(function(){  $("#regForm").validate({    rules: {      username:{        required: true,        minlength: 2      },      password:{        required: true,        minlength: 6,        maxlength: 16      },      repassword:{        required: true,        equalTo: "#password"      },      amt: {        required: true,        amtCheck: true      }    },    messages:{      username:{        required: "用户名不能为空",        minlength: "用户名的最小长度为2"      },      password:{        required: "密码不能为空",        minlength: "密码长度不能少于6个字符",        maxlength: "密码长度不能超过16个字符"      },      repassword:{        required: "确认密码不能为空",        equalTo: "确认密码和密码不一致"      },      amt: {        required: "金额不能为空"      }    }  });});</script>

 

表单验证css样式

  最后还要为页面元素添加css样式。插件中有一系列默认选项:其中默认错误显示标签为label,错误样式为label.error。

上面在 jquery.validate.extend.js文件中,有一个success函数需要说明一下。这个函数是在校验成功的时候执行的,我们在函数中为 label提示标签添加了校验正确对应的样式label.valid。因此在css中如果要美化信息提示,需要对label相关样式如 error,valid样式进行设计。

此外我们在扩展插件功能中添加了一个class为tip的label标签,该标签仅在校验元素获得焦点时生成。为 此,还需要设置label的tip样式。

  完整的样式文件内容具体如下:

 1 body{ 2   font-family: Microsoft Yahei; 3   font-size: 15px; 4 } 5  6 fieldset{  width: 680px;  } 7  8 legend{  margin-left: 8px;  } 9 10 .item{11   height: 56px;12   line-height: 36px;13   margin: 10px;14 }15 16 .item .item-label{17   float: left;18   width: 80px;19   text-align: right;20 }21 22 .item-text{23   float: left;24   width: 244px;25   height: 16px;26   padding: 9px 25px 9px 5px;27   margin-left: 10px;28   border: 1px solid #ccc;29   overflow: hidden;30 }31 32 .item-select{33   float: left;34   height: 34px;35   border: 1px solid #ccc;36   margin-left: 10px;37   font-size: 14px;38   padding: 6px 0px;39 }40 41 .item-submit{42   margin-left: 88px;43 }44 45 input.error{46   border: 1px solid #E6594E;47 }48 49 input.highlight{50   border: 1px solid #7abd54;51 }52 53 label.error,label.tip{54   float: left;55   height: 32px;56   line-height: 32px;57   font-size: 14px;58   text-align: left;59   margin-left: 5px;60   padding-left: 20px;61   color: red;62   background: url('error.png') no-repeat left center;63 }64 65 label.tip{66   color: #aaa;67   background: url('tip.png') no-repeat left center;68 }69 70 label.valid{71   background: url('valid.png') no-repeat left center;72   width: 32px;73 }

表单验证效果演示

  至此,表单校验的代码编写和插件的应用已经全部完成。

基本上满足现在大多数网站表单验证的要求,如果需要增加验证规则,只需要在jquery.validate.extend.js中增加校验规则即可,例子如下:

 1 /*******************************插件字段校验*****************************************/ 2 $.validator.addMethod( 3   "amtCheck", 4   function(value, element){ 5     /*var dotPos = value.indexOf('.'); 6     return value > 0 && dotPos < 0 && (dotPos > 0 && value.substring(dotPos + 1) <= 2);*/ 7      8     return value && /^\d*\.?\d{0,2}$/.test(value); 9   },10   "金额必须大于0且小数位数不超过2位"11 );

 

 1 /*******************************插件字段校验*****************************************/ 2 $.validator.addMethod( 3   "amtCheck", 4   function(value, element){ 5     /*var dotPos = value.indexOf('.'); 6     return value > 0 && dotPos < 0 && (dotPos > 0 && value.substring(dotPos + 1) <= 2);*/ 7      8     return value && /^\d*\.?\d{0,2}$/.test(value); 9   },10   "金额必须大于0且小数位数不超过2位"11 );

extend Code