jQuery formValidator表单验证插件

什么是jQuery formValidator？

jQuery formValidator表单验证插件是客户端表单验证插件。 在作B/S开发的时候，咱们常常涉及到不少表单验证，例如新用户注册，填写我的资料，录入一些常规数据等等。在这以前，页面开发者（JavaScript开发者）须要编写大量的JavaScript来进行表单元素的校验，而这些校验在平时开发中不停的重复书写。 常见的校验如不能为空，必须知足长度要求，必须为数字，必须为Email等等。通常要判断的表单元素比较多，开发过程就显得枯燥无味——重复的代码不断重复，并且可能还要兼容多种浏览器，更多的考虑因素令人头疼不已。因为每一个要校验的页面虽然逻辑基本相同，可是在大多数状况下，出于种种缘由，开发者宁愿再编写一套JS文件，为了便于管理。 jQuery formValidator表单插件致力于改善这一过程。你只关心业务逻辑，而无需关系实现过程,只需简单的配置，无需写代码就能实现表单的检验。它包括常规检验功能和可扩展校验功能。针对每一个表单元素你只须要写一行配置信息就能完成校验。而这些配置信息无需写入表单元素，实现了js代码和html代码的分离。这样作的好处，使B/S开发过程当中，分工更加明确，页面设计着只需关心他的页面（设计的时候没必要担忧把脚本弄坏了），javascript开发者只需关心脚本的开发。 而插件自己包含的校验方式能够有无数种，只要你扩展正则表达式和函数。本插件于同类校验插件最大的区别：校验功能能够扩展；实现了校验代码于html代码的彻底分离；你只需写一行配置信息就能完成一个表单元素的全部校验。插件自己提供了不少回调函数，使调用者能最大限度的发挥本身的想象能力来完成本身的业务需求。 在同一个页面你能够拥有不少个校验组，你只需在提交的按钮那里调用 return jQuery.formValidator.pageIsValid('校验组号') 来完成多个组的校验，互不干扰。 插件具有跨浏览器的能力。目前在ie和ff两种浏览器下调试经过，你不用再考虑在多浏览器下如何兼容，jQuery formValidator帮你作到了这些。

jQuery formValidator文件在PHPCMS V9中放置在哪里?

web目录\statics\js\formvalidator.js

web目录\statics\js\formvalidatorregex.js

如何在v9中加载jQuery formValidator?

1 2	<script language= "javascript" src= "<?php echo JS_PATH?>formvalidator.js" type= "text/javascript" charset= "UTF-8" ></script> <script language= "javascript" src= "<?php echo JS_PATH?>formvalidatorregex.js" type= "text/javascript" charset= "UTF-8" ></script>

 

jQuery formValidator插件的API帮助

目前支持5种大的校验方式，分别是：inputValidator（针对input、textarea、select控件的字符长度、值范围、选择个数的控制）、compareValidator（提供2个对象的比较，目前能够比较字符串和数值型）、ajaxValidator（经过ajax到服务器上作数据校验）、regexValidator（提供可扩展的正则表达式库） 、functionValidator （提供可扩展函数库来作校验）

每种格式支持的控件类型以下：

	input					textarea	select
校验方式	text	radio	checkbox	file	password	textarea	select-one
inputValidator	√	√	√	√	√	√	√
compareValidator	√			√	√	√
ajaxValidator	√			√	√	√	√
regexValidator	√			√	√	√
functionValidator	√	√	√	√	√	√	√

若是你用了不支持的校验功能，插件将忽略这个校验功能。

插件目前提示错误，有两种模式：showword和showalert,即文字提示和窗口提示，下面的4大验证方式，针对showalert这种方式不是都必须的，有些配置是没有做用的
下面分别罗列全局初始化和5种校验方式公开的属性

formValidator:用来作初始化的类型，必须先执行。（"√"为showalert可用参数

属性	属性名称	默认值	showalert	详细解释
validatorgroup	校验组	"1"	√	一个页面的控件能够分红多个组，分开校验
empty	是否能够为空	false	√
automodify	输入错误离开焦点的时候，自动修复错误	false	√	先给出提示而后，自动修复，目前只支持text、file、textarea三种类型
onempty	空时候的提示	"输入内容为空"		能够为空，为空时候的提示。为空者不显示
onshow	显示时候的提示	"请输入内容"		为空者不显示
onfocus	得到焦点的提示	"请输入内容"		为空者不显示
oncorrect	输入正确后的提示	"输入正确"		当你焦点离开控件的时候，若是输入正确将出现该提示。为空者不显示
tipid	显示错误的容器ID	表单ID+"Tip"		若是不自动构建提示层，表示提示成的ID号 若是自动构建提示层，表示提示层相对的目标控件
tipcss	自动构建的提示层的样式	"left":"10px", "top":"1px", "height":"20px", "width":"250px"		主要用于定位自动构建的提示层
forcevalid	强制输入的值必须有效	true	√	是否把一个全角字符当作2个长度的参数
defaultvalue	默认值	null	√	全部input和select表单。若是你不设置就保持原值，一旦设置就设为默认值。

inputValidator：

属性	属性名称	默认值	详细解释
type	比较类型	"size"	(对select无效) "size":表示比较长度 ，默认值 "number":数值型比较 "string":字符型比较 "date":短日期类型 "datetime":长日期类型
min	最小长度/值	0	默认数值型。若是进行字符比较，请收入字符型 对select-one而言inputValidator里的参数min和max表示选择的索引号范围 对select-multiple而言inputValidator里的参数min和max表示选择的个数
max	最大长度/值	99999999999	同上
onerror	发生错误的提示	"输入错误"	为空者不显示。
onerrormin	比min属性小的提示	null	当用户输入的值比min属性小的时候的错误提示
onerrormax	比max属性大的提示	null	当用户输入的值比max属性大的时候的错误提示
empty	控件文本值是否容许两边为空	两边都容许出现空	默认值{leftempty:true,rightempty:true,emptyerror:null} leftempty:表示左边是否容许为空 rightempty:表示右边是否容许为空 emptyerror：出现该错误的时候的提示，若是为null，则利用onerror属性来提示错误。

compareValidator：

属性	属性名称	默认值	详细解释
desid	要比较控件的ID	""	要跟源目标进行比较的目标ID
operateor	比较符号	"="	一共有以下几种类型:=、!=、>、>=、<、<=
datatype	数据类型	"string"	目前只支持2种:"string"、"number","datetime","date"
onerror	发生错误的提示	"输入错误"	为空者不显示。

regexValidator:

属性	属性名称	默认值	详细解释
regexp	正则表达式	""	采用的是显式构造函数new RegExp("pattern"[,"flags"]); 因为Javascript 中'\' 被用做转义字符，因此在使用显示构造函数构造实例对象的时候，须要使用'\\' 代替'\'
param	附加参数	"i"	g：表明能够进行全局匹配。 i：表明不区分大小写匹配。 m：表明能够进行多行匹配。 能够任意组合,固然也能够不加参数
datatype	数据类型	"string"	"string":本身写的表达式，"enum":枚举名。具体请见demo3.htm 你能够本身修改、添加formValidatorRegex.js里的枚举项目名和表达式。
onerror:	发生错误的提示	"输入错误"	为空者不显示。

ajaxValidator:几乎全部的属性跟$.ajax()的属性同样，请参考$.ajax()函数的帮助

属性	属性名称	默认值	详细解释
type	请求的类型	"GET"	"POST" 或 "GET"
url	发送到的URL地址	""
datatype	返回的数据类型	"html"	xml、html、script、json
data	数据	""
async	是否以异步的方式发送	true
success	当请求成功时调用的函数	null
processdata	自动处理返回的数据为字符串	true	在默认的状况下，若是data选项传进的数据是一个对象而不是字符串，将会自动地被处理和转换成一个查询字符串
complete	当请求完成时调用的函数	null
beforesend	当请求前时调用的函数	null	有个一个参数，根$.ajax里的beforeSend参数同样。
buttons	你点提交的按钮(组)jQuery对象	null	当你触发了ajax校验，buttons里对应的按钮（组）就会灰掉，一直等待服务器返回数据为止
error	当请求失败时调用的函数	"请求失败"	你能够本身定义这个错误，在error里自动打出。为空者不显示。

functionValidator

属性	属性名称	默认值	返回值的解释
fun	外部函数名() 参数1:元素的值, 参数2:元素对象	默认看成处理过程	true/false 校验成功/失败 字符串 校验失败，返回值看成自定义错误 无 处理过程
onerror	发生错误的提示	"输入错误"	函数return false的时候，显示该错误信息

公共函数:主要是设置全局参数和判断是否经过校验

函数名	函数说明
$.formValidator.initConfig	参数：配置类型 属性 默认值 说明 validatorgroup "1" 你要针对哪一个组进行配置 formid "" 要自动注册pageIsValid函数的表单ID号 alertmessage false 是否弹出窗口 autotip false 是否自动构建提示层 errorfocus true 发生错误的时候，第一个出错控件是否得到焦点 forcevalid true 是否一直输入正确为止才容许离开焦点 wideword true 是否把一个全角字符当作2个长度 onsuccess null 该组校验经过后的回调函数,返回false，阻止表单的提交 submitonce false 校验经过后，是否灰掉全部的提交按钮 onerror null 该组校验失败后的回调函数， 有两个参数 参数1 一个校验没有经过的错误信息 参数2 一个校验没有经过的元素对象 debug false 是否处于调试模式。true:不提交表单
$.formValidator.pageIsValid	一个参数： 不是配置类型 validatorgroup "1" 你要针对哪一个组进行验证
$.formValidator.isOneValid	一个参数： 当时设置验证的表单元素ID。 返回是否校验成功的信息。
$.formValidator.setFailState	function("tipid","显示的信息") 在showword模式下，若是你的额外校验没有经过，你能够经过它来设置成失败信息和状态
$.formValidator.getLength	function("表单元素id") checkbox或radiobutton表示(同组)选择的个数。 对select-one，选择索引的值 对select-multiple，inputValidator里的参数min和max表示选择的个数 其它input表示的表示字符长度。
$.formValidator.retSetTipState	function(校验组号) 来把该组的提示内容恢复到onshow状态