当前位置:首页 > java知识学习_java技术文章 > 正文

Jquery validationengine实现自定义表单验证

浏览1234+

一、jquery表单验证插件介绍

validationengine基于jquery开发完成的一款能够实现表单自定义验证的前端验证插件,该插件非常友好,完美兼容jquery的所有功能,并且能够应用在各大主流浏览器,技术人员主要用它来处理表单提交验证。

该控件儿功能非常强大,自带简洁的CSS样式,完全按照api提供的语法声明即可,不需要自己编写样式,非常便捷简单。

validationengine插件支持的验证类型非常丰富,比如说有表单提交验证、Ajax异步表单验证以及日期、字符、字符串、邮箱、手机号码、下拉选择框、单选多选框等各个类型的字段都可以验证,并且还提供插件儿自定义扩展的功能,当现有的api满足不了前端验证需求时,我们还可以将该插件二次开发扩展其功能。

二、插件新版本下载与说明

目前jquery validation engine插件更新的最新版本是2.6.2版本,它是基于jquery1.7的版本开发而来,目前最新的版本提供了英文和中文版两个版本。

相对于过去的2.4.2的版本,新版本部分功能发生了一些细微的变化,具体变化详见下图。

jquery validation插件新版本的功能

至于该验证插件的中文版本,主要针对国内中小企业的项目应用,增加了多款中文验证样式和相应的提示信息和验证规则。

DEmo演示地址:http://code.ciaoca.com/jquery/validation-engine/demo/

英文版Git下载地址:https://github.com/posabsolute/jQuery-Validation-Engine

中文版下载地址:点此下载中文优化版本

三、validationengine自定义表单验证入门案例

步骤一:引入相应的js和css文件

插件所需的js和css文件引入

该插件而是依赖于jquery的,所以上图中首先应该要引入jquery文件,引入顺序一定是jquery在第一行,这样才能保证其它文件依赖它。

然后引入validationengine的js脚本文件和CSS样式文件,至于zh_Cn.js文件是语言相关的文件,该插件儿支持多种语言。

步骤二:form表单改造

首先,我们应该给表单添加一个ID属性,这样进行表单验证的时候就能够根据ID识别验证的哪一个表单,其次,每一个表单元素上面都加一个class属性,该属性用来编写表单元素的验证规则,详见下图:

表单验证规则语法格式

上图中展示的是表单中各个元素验证的语法规则,格式如下:validate[required],此格式的意思是该文本框的内容是必填项,验证规则写在中括号里面,如果有多个规则之间用逗号隔开。

由于该插件的表单验证规则和验证类型实在是太多了,我们也无法一一进行详解,只能将贴图汇总的所有验证类型,然后挑选常用的和重点的介绍,详见下图:

validationengine表单验证类型汇总表

步骤三:编写js代码验证表单内容

提交验证表单的方式有很多种,实际工作中不同的需求可能会用到不同的验证方式,为了让大家都有所了解,我们将一一介绍每一种的用法。

1)默认表单验证方式:

$(‘#form_id’).validationEngine();

默认验证表单元素的方法很简单,直接调用validationEngine()方法即可,此种默认的情况验证方式是当鼠标在每一个表单元素失去焦点后开始验证,不符合验证规则的将会有提示信息,比如我们设置的是class=”validate[required]”,那么默认的提示信息就是”此处不可空白”,具体详见下图:

此处不能空白的表单提示信息展示

2)可以自定义设置参数的表单验证方式:

通常默认的表单验证不是我们工作中常用的,因为工作中的需求比较复杂,对界面美观要求也比较高,这就需要我们自定义参数设置。

$('#form_id').validationEngine('attach', {
  promptPosition: 'centerRight',
  scroll: false
});

上面的验证代码就是带参的验证方式,attach的意思就是验证方式与表单进行绑定,promptPosition的意思是表单提示信息展示的位置,可以偏左偏右设置,该参数有多个值可选,scroll意思是屏幕是否滚动到验证不通过表单元素位置,可设置的参数还有很多很多,下图是我们列出的比较重要和常用的参数列表:

表单验证参数列表

3)触发事件的表单验证方式

上面提到的默认提交表单验证方式是鼠标失去焦点之后验证失去焦点的元素,其实它默认绑定的是blur事件,所以我们可以根据修改事件来自定义确定表单的验证时机,比如说我们在提交表单的时候开始验证,又或者说我们点击某个按钮的时候,开始验证都可以。

修改事件的表单验证代码

上图中的代码就是我们可以修改触发事件的方式验证表单元素,主要是validationEventTrigger这个属性,该属性可以绑定一切dom事件。

如果我们想要在提交表单的时候才验证表单值,该属性直接设置为空即可,如果我们设置键盘按起来的时候验证,就设置keyup blur事件属性。

4)Ajax与后台交互validationengine表单验证方式

有些情况下的表单验证不是单单的只验证输入文本格式是否匹配,有时候还需要通过向后台数据库查询数据进行验证,比如说我们在验证用户名的时候需要判断用户名是否存在,此种情况需要使用ajax向后台数据库查询该用户名,具体代码如下图:

ajax进行表单验证的代码

上图中定义的参数都是与ajax提交表单验证相关的,指定了ajax的提交方式为post请求以及请求成功后的回调函数。

ajax请求后台后,拿回来的数据格式是一个json格式,但是数据格式有一点点小问题,需要自定义扩展和validationengine的js文件,具体修改内容参见下图:

validationengine的js文件扩展代码展示

 

相关文章推荐

jQuery Validation Engine 表单验证

validationEngine 表单验证插件使用实例api代码

jQuery Validation Engine表单验证为false

jQuery Validation Engine表单验证为false

validationEngine参数详解配置

validationEngine如何忽略表单中display隐藏为none的元素?

jQuery.validationEngine.js ajax验证时总是失败

Validate表单验证

FormValidation的使用(简单验证)

 

百度云网盘视频教程分享

责任声明:文章信息由IT教程屋小编精心整理总结编排而成,倾注了心血和汗水,转载时请遵循行业规范务必注明文章作者、来源及本页链接,谢谢合作!
本篇文章标题:Jquery validationengine实现自定义表单验证
本篇文章url地址:http://www.itjcw123.cn/2790.html