jquery表單驗證使用外掛程式formValidator_表單特效

1.先在專案中加入必備js與css

 
2.代碼中添加引用（必備引用）

複製代碼 程式碼如下:

3.中要驗證的標籤（做一些常用的示範）

複製程式碼 程式碼如下:

身份证(正则表达式库):
身份证(外部函数):
整数:
正整数:
负整数:
数字:
正数（正整数 + 0）:
负数（负整数 + 0）:
浮点数:
正浮点数:
负浮点数:
非负浮点数（正浮点数 + 0）:
非正浮点数（负浮点数 + 0）:
颜色:
你的EMAIL:
手机:
邮编:
非空:
图片:
压缩文件:
ip4:
QQ号码:
国内电话:
用户名:
字母:
大写字母:
小写字母:
身份证:

4.<script>中的程式碼</script>

複製程式碼 程式碼如下:

5.效果图：

 
6.<script>中函数参数说明：</script>

formValidator:

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

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

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：代表可以进行多行匹配。 可以任意组合,当然也可以不加参数
comparetype	比较类型	"||"	"||"或的关系   "&&"并列
datatype	数据类型	"string"	"string":自己写的表达式，"enum":枚举名。具体请见demo3.htm 你可以自己修改、添加formValidatorRegex.js里的枚举项目名和表达式。
onerror:	发生错误的提示	"输入错误"	为空者不显示。

ajaxValidator:

几乎所有的属性跟$.ajax()的属性一样，请参考$.ajax()函数的帮助

属性	属性名称	默认值	详细解释
type	请求的类型	"GET"	"POST" 或 "GET"
url	发送到的URL地址	""	在服务器端，你可以通过name为clientid获取触发验证的控件ID名
datatype	返回的数据类型	"html"	xml、html、script、json、text
timeout	超时设置	999
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	一个校验没有通过的元素对象
参数3	所有的错误信息数组，你可以通过$.map来遍历

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状态

$.formValidator.reloadAutoTip

重新定位自动构建的提示层

formValidator:

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

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

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：代表可以进行多行匹配。 可以任意组合,当然也可以不加参数
comparetype	比较类型	"||"	"||"或的关系   "&&"并列
datatype	数据类型	"string"	"string":自己写的表达式，"enum":枚举名。具体请见demo3.htm 你可以自己修改、添加formValidatorRegex.js里的枚举项目名和表达式。
onerror:	发生错误的提示	"输入错误"	为空者不显示。

ajaxValidator:

几乎所有的属性跟$.ajax()的属性一样，请参考$.ajax()函数的帮助

属性	属性名称	默认值	详细解释
type	请求的类型	"GET"	"POST" 或 "GET"
url	发送到的URL地址	""	在服务器端，你可以通过name为clientid获取触发验证的控件ID名
datatype	返回的数据类型	"html"	xml、html、script、json、text
timeout	超时设置	999
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	一个校验没有通过的元素对象
参数3	所有的错误信息数组，你可以通过$.map来遍历

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状态

$.formValidator.reloadAutoTip

重新定位自动构建的提示层

formValidator:

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

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

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：代表可以进行多行匹配。 可以任意组合,当然也可以不加参数
comparetype	比较类型	"||"	"||"或的关系   "&&"并列
datatype	数据类型	"string"	"string":自己写的表达式，"enum":枚举名。具体请见demo3.htm 你可以自己修改、添加formValidatorRegex.js里的枚举项目名和表达式。
onerror:	发生错误的提示	"输入错误"	为空者不显示。

ajaxValidator:

几乎所有的属性跟$.ajax()的属性一样，请参考$.ajax()函数的帮助

属性	属性名称	默认值	详细解释
type	请求的类型	"GET"	"POST" 或 "GET"
url	发送到的URL地址	""	在服务器端，你可以通过name为clientid获取触发验证的控件ID名
datatype	返回的数据类型	"html"	xml、html、script、json、text
timeout	超时设置	999
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	一个校验没有通过的元素对象
参数3	所有的错误信息数组，你可以通过$.map来遍历

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状态

$.formValidator.reloadAutoTip

重新定位自动构建的提示层

6.新增修改說明：

複製程式碼 程式碼如下:

>

$.formValidator.reloadAutoTip(); //重新載入表單驗證樣式
if(!$.formValidator.pageIsValid('1')) return false; //如果不通過則不提交

複製程式碼

程式碼如下:


$(document). {
$.formValidator.initConfig({ formID: "form1", onError: function () { alert("校驗沒有通過，具體錯誤請看錯誤提示") } });
$("# name").formValidator({ onShow: "請輸入姓名！", onFocus: "輸入一個到十個字元", onCorrect: "輸入正確，謝謝您的合作！" }).inputValidator({ min: 1, max : 20, onError: "輸入長度，不對！" });
$("#timelong").formValidator({ onShow: "請輸入路演時長！", onFocus: "輸入格式為正整數！", onCorrect: "輸入正確，謝謝您的合作！" }).regexValidator({ regExp:"intege1",dataType: "enum", onError: "您輸入的長度格式不正確！" });
$( "#address").formValidator({ onShow: "請輸入路演平台名稱！", onFocus: "輸入一個到五十個字元", onCorrect: "輸入正確，謝謝您的合作！" }).inputValidator({ min: 1, max: 50, onError: "輸入長度，不對！" });
$("#urladdress").formValidator({ onShow: "請輸入路演連結位址！", onFocus: "輸入格式：http://www.baidu.com", onCorrect: "輸入正確，謝謝您的合作！ Z0-9.-] (:[a-zA-Z0-9.&%$-] )*@)*((25[0-5]|2[0-4][0-9]|[0 -1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]).(25[0-5]|2[0 -4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0 ).(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0- 9]{1}|[1-9]|0).(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2 }|[1-9]{1}[0-9]{1}|[0-9])|localhost|([a-zA-Z0-9-] .)*[a-zA-Z0-9 -] .(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0 -9] )*(/($|[a-zA-Z0-9.,?'\ &%$#​​=~_-] ))*$", onError: "輸入格式不正確！ " });
$("#time").formValidator({ onCorrect: "格式正確" }).functionValidator({fun:isDateTime, onError: "輸入格式，不對！" });

$ ("#txtcontent").formValidator({ onShow: "請輸入專家簡介！", onFocus: "輸入一個到一百個字元", onCorrect: "輸入正確，謝謝您的合作！" }).inputValidator({ min: 1, max: 100, onError: "輸入長度，不對！" }); });