当前位置: 开发笔记 > 编程语言 > 正文

jQueryformValidator表单验证插件一些摘要和例子

作者：etqq | 来源：互联网 | 2023-10-10 14:12

6种校验方式：inputValidator（针对input、textarea、select控件的字符长度、值范围、选择个数的控制)inputValidator概述针对input、t

6种校验方式：

inputValidator（针对input、textarea、select控件的字符长度、值范围、选择个数的控制)

inputValidator

概述

针对input、textarea、select控件的字符长度、值范围、选择个数的控制

支持的控件类型
text(文本框)、radio(单选框)、checkbox(复选框)、file(文件选择器)、password(密码框)、textarea(多行编辑框)、select(选择框)

选项

typeObject

(默认: "size")     属性名:比较类型。    值有以下几个类型:
      "size":表示字符长度/(checkbox/radio)选择的个数
      "number":数值型比较
      "string":字符型比较
      "date":短日期类型
      "datetime":长日期类型

minObject

(默认: 0)     属性名:最小长度/值。    默认数值型，表示对选择个数或长度。
      对checkbox/radio而言表示选中控件的个数
      对text(文本框)、password(密码框)、textarea(多行编辑框)而言表示输入值的字符长度或值的大小
      对select-one而言inputValidator里的参数min和max表示选择的索引号范围
      对select-multiple而言inputValidator里的参数min和max表示选择的个数

maxObject

(默认: 99999) 属性名:最大长度/值。同上min属性

onErrorString

(默认: 输入错误) 属性名:发生错误的提示。发生错误时候的提示。为空则不显示。

onErrorMinString

属性名:比min属性小的提示。当用户输入的值比min属性小的时候的错误提示

$("#nl").formValidator({
          autoModify:true,
          onShow:"请输入的年龄（1-99岁之间）",
          onFocus:"只能输入1-99之间的数字哦",
          onCorrect:"恭喜你,你输对了"
      }).
      inputValidator({
          min:1,
          max:99,
          type:"value",
          onErrorMin:"你输入的值必须大于等于1",
          onError:"年龄必须在1-99之间，请确认"
      });

onErrorMaxString

属性名:比max属性大的提示。当用户输入的值比max属性大的时候的错误提示

emptyJson

属性名:是否允许两边为空。    默认两遍允许为空，默认值{leftEmpty:true,rightEmpty:true,emptyError:null}
      leftEmpty:表示左边是否允许为空
      rightEmpty:表示右边是否允许为空
      emptyError：出现该错误的时候的提示，如果为null，则利用onError属性来提示错误。

示例

描述:

校验【用户名:input-text控件:username】的长度，必须在4-10之间

jQuery 代码:

$("#username").formValidator({
          onShow:"请输入用户名",
          onFocus:"用户名至少4个字符,最多10个字符",
          onCorrect:"该用户名可以注册"
      })
      .inputValidator({
          min:4,max:10,
          onError:"你输入的用户名非法,请确认"
      });

描述:

校验【年龄:input-text控件:nl】的值（数值），必须在1-99之间

jQuery 代码:

$("#nl").formValidator({
          autoModify:true,
          onShow:"请输入的年龄（1-99岁之间）",
          onFocus:"只能输入1-99之间的数字哦",
          onCorrect:"恭喜你,你输对了"
      }).
      inputValidator({
          min:1,
          max:99,
          type:"value",
          onErrorMin:"你输入的值必须大于等于1",
          onError:"年龄必须在1-99之间，请确认"
      });

描述:

校验【兴趣爱好:checkbox控件:xqah】至少选择2个，最多3个

jQuery 代码:

$(":checkbox[name='xqah']").formValidator({
          onShow:"请选择你的兴趣爱好(至少选择2个,最多选择3个)",
          onFocus:"你至少选择2个,最多选择3个",
          onCorrect:"恭喜你,你选对了",
          defaultValue:["7","8"]})
      .inputValidator({
          min:2,
          max:3,
          onError:"你选的个数不对(至少选择2个,最多选择3个)"
      });

描述:

校验【学历:select控件:xueli】必须选择

jQuery 代码:

$("#xueli").formValidator({
          onShow:"请选择你的学历",
          onFocus:"学历必须选择",
          onCorrect:"谢谢你的配合",
          defaultValue:"a"})
      .inputValidator({
          min:1,
          onError: "你是不是忘记选择学历了!"
      }).defaultPassed();

compareValidator（提供2个对象的比较，目前可以比较字符串和数值型）

compareValidator

概述

提供2个对象的比较，目前可以比较字符串和数值型

支持的控件类型
text(文本框)、file(文件选择器)、password(密码框)、textarea(多行编辑框)

选项

desIDString

属性名:要比较控件的ID。要跟源目标进行比较的目标ID

operateorString

(默认: "=") 属性名:比较符号。一共有如下几种类型:=、!=、>、>=、<、<=

dataTypeString

(默认: "string") 属性名:数据类型。目前只支持4种:"string"、"number","datetime","date"

onErrorString

(默认: "输入错误") 属性名:发生错误的提示。发生错误时候的提示。为空则不显示。

示例

描述:

重复密码(password2)必须于密码(password2)一致

jQuery 代码:

$("#password2").formValidator({
          onShow:"输再次输入密码",
          onFocus:"至少1个长度",
          onCorrect:"密码一致"})
      .inputValidator({min:1,onError:"重复密码不能为空,请确认"})
      .compareValidator({
          desID:"password1",
          operateor:"=",
          onError:"2次密码不一致,请确认"
      });

ajaxValidator（通过ajax到服务器上做数据校验）

返回值:jQueryajaxValidator

概述

通过ajax到服务器上做数据校验

支持的控件类型
      text(文本框)、file(文件选择器)、password(密码框)、textarea(多行编辑框)、select(选择框)

      排错步骤
      1、检查当前插件类库是否为最新版本
      2、检查jQuery类库是否超过支持的最高版本(1.4.4)
      3、检查URL路径是否正确，在服务端设置断点，看是否能执行到。
      4、要一起提交给服务器的控件的formValidator函数里必须配置ajax:true

      注意事项
      1、在提交的时候，在URL后面自动追加clientID参数，表示触发校验的控件ID
      2、在提交的时候，在URL后面自动追加rand参数，这个是个随机数，所以你不必再传递个当前时间戳
      3、几乎所有的属性跟$.ajax()的属性一样，请参考$.ajax()函数的帮助
      4、你的控件值不能直接串到url参数后面，这样是取不到值得，例如url:"你的网址.ashx?"+$("#控件ID").val()

选项

typeString

(默认: "GET") 属性名:请求的类型。请求方式 ("POST" 或 "GET")，默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

urlString

(默认: 当前页地址) 属性名:发送到的URL地址。发送请求的地址。在服务器端，你可以通过name为clientid获取触发验证的控件ID名

dataTypeString

(默认: "html") 属性名:返回的数据类型。 xml、html、script、json、text

timeoutNumber

(默认: 999) 属性名:超时设置。超时设置

dataObject,String

属性名:数据。

asyncBoolean

(默认: true) 属性名:是否异步发送。是否以异步的方式发送

successFunction

属性名:成功时的回调函数。    你可以返回的类型有以下几种：
      1、false。将显示onError信息到提示层上
      2、true。将显示formValidator的onCorrect信息到提示层上
      3、字符串。作用同false，返回的字符串将显示在提示层上

processDataObject,String

(默认: true) 属性名:是否转换为对象。在默认的情况下，如果data选项传进的数据是一个对象而不是字符串，将会自动地被处理和转换成一个查询字符串

completeFunction

属性名:完成时的调用函数。 ajax请求结束的回调函数

beforeSendFunction

属性名:请求前时调用的函数。 ajax校验之前的回调函数，你可以返回true、false、字符串。如果返回字符串，表示校验失败，返回的信息当做错误信息显示出来。

buttonsString

属性名:你点提交的按钮(组)jQuery对象。当你触发了ajax校验，在发送之前，buttons里对应的按钮（组）就会灰掉，一直等待服务器返回数据为止，就重新亮起来

errorFunction

属性名:失败时的回调函数。失败时的回调函数

onWaitString

(默认: "正在等待服务器返回数据") 属性名:正在校验的提示。已经发送，但是服务器还未返回数据时候的提示消息。

onErrorObject,String

(默认: "服务器校验没有通过")     属性名:校验没有通过的提示。    该参数的类型有2种
      1、字符串。发生错误时候的提示消息。
      2、函数。有两个参数，参数1：当前值参数2：当前控件对象(dom)

示例

描述:

对用户名进行ajax校验

jQuery 代码:

$("#us").formValidator({onShow:"请输入用户名",onFocus:"用户名至少5个字符,最多10个字符",onCorrect:"该用户名可以注册"}).inputValidator({min:5,max:10,onError:"你输入的用户名非法,请确认"})
           .ajaxValidator({
              dataType : "html",
              async : true,
              url : "http://www.51gh.net/chkuser.aspx?act=ok",
              success : function(data){
                  if( data.indexOf("此用户名可以注册!") > 0 ) return true;
                  return data;
              },
              buttons: $("#button"),
              error: function(jqXHR, textStatus, errorThrown){alert("服务器没有返回数据，可能服务器忙，请重试"+errorThrown);},
              onError : "该用户名不可用，请更换用户名",
              onWait : "正在对用户名进行合法性校验，请稍候..."
          })

regexValidator（提供可扩展的正则表达式库）

regexValidator

概述

利用正则表达式多输入格式进行校验

支持的控件类型
text(文本框)、file(文件选择器)、password(密码框)、textarea(多行编辑框)

选项

regExpObject

属性名:正则表达式或表达式数组。    参数类型分两类：
      1、字符型。表示正则表达式或则枚举类型
      2、字符数组型。表示正则表达式或则枚举类型的数组形式
      采用的是显式构造函数new RegExp("pattern"[,"flags"]); 由于Javascript 中'\' 被用作转义字符，所以在使用显示构造函数构造实例对象的时候，需要使用'\\' 代替'\'

paramString

(默认: "i")     属性名:附加参数。    值有以下几种类型：
      g：代表可以进行全局匹配。
      i：代表不区分大小写匹配。
      m：代表可以进行多行匹配。
      可以任意组合,当然也可以不加参数

compareTypeStringVer4.0.1新增

(默认: "||")     属性名:比较类型。    值有以下几种类型：
      ||：或的关系
      &&：并列的关系
      当regExp为数组的时候，当前这个参数就表示，数组里的正则表达式的相互关系。

dataTypeString

(默认: "string")     属性名:数据类型。    值有以下几种类型：
      string：自己写的表达式
      enum：枚举名。
      一般情况下，枚举名在formValidatorReg.js里设置，该脚本里已经默认带了几个常用正则表达式。你可以自己修改、添加formValidatorRegex.js里的枚举项目名和表达式。

onErrorString

(默认: "输入错误") 属性名:发生错误的提示。发生错误时候的提示。为空者不显示。

示例

描述:

验证录入的手机号码的合法性

jQuery 代码:

$("#shouji").formValidator({...})
      .inputValidator({
          min:11,
          max:11,
          onError:"手机号码必须是11位的,请确认"})
      .regexValidator({
          regExp:"mobile",
          dataType:"enum",    //如果是"string",则regExp必须是正则表达式
          onError:"你输入的手机号码格式不正确"
      });

描述:

输入框即可以是手机号码，也可以是电话号码

jQuery 代码:

$("#sjdh").formValidator({empty:true,onFocus:"格式例如：0577-88888888或11位手机号码"...})
      .regexValidator({
          regExp:["tel","mobile"],
          dataType:"enum",
          onError:"你输入的手机或电话格式不正确"
      });

functionValidator （可使用外部函数来做校验，可以当做过程处理）

functionValidator

概述

利用外部函数来做校验

注意事项
      插件会为外部函数传递两个参数：
      1、当前值
      2、当前控件对象。
      你的外部函数起码要有一个参数，来接收当前的值。

      支持的控件类型
      text(文本框)、radio(单选框)、checkbox(复选框)、file(文件选择器)、password(密码框)、textarea(多行编辑框)、select(选择框)

选项

funFunction

属性名:外部函数名。    调用外部函数进行校验，提供2个参数：
      参数1:元素的值,
      参数2:元素对象。

      返回值，有以下几种类型：
      true: 校验成功
      false: 校验失败
      字符串:校验失败，返回值当作自定义错误信息，将显示在提示层上
      无: 仅当一个处理过程。

onErrorString

(默认: "输入错误") 属性名:发生错误的提示。发生错误时候的提示，为空则不显示。参数fun函数返回false的时候，显示该错误信息。

示例

描述:

调用外部函数对录入的身份证进行校验

jQuery 代码:

isCardID是个外部函数。
      $("#sfzh").formValidator({onShow:"请输入15或18位的身份证",onFocus:"输入15或18位的身份证",onCorrect:"输入正确"})
      .functionValidator({fun:isCardID});

描述:

直接写匿名函数判断用户名是否含关键字

jQuery 代码:

$("#us").formValidator({onShow:"用户名至少5个字符,最多10个字符"...})
      .inputValidator({min:5,max:10,onError:"你输入的用户名非法,请确认"})
      .functionValidator({fun:function(val){
          if(val == "admin"){return "该用户名包含保留关键字"}
      }});

passwordValidator（密码强度校验）

passwordValidator

概述

对密码强度进行校验

注意事项
      1、如果你用的皮肤没有设置密码强度校验的相关内容，你是不能调用该函数的。
      2、密码强度校验的规则，你可以在皮肤文件中修改。

      支持的控件类型
      password(密码框)

选项

compareIDString

(默认: "") 属性名:比较控件ID。你要比较的控件ID。例如，密码不能于用户名相同，则该参数为用户名的ID，错误提示用参数onErrorCompareSame

onErrorCompareSameString

(默认: "密码于用户名相同不被允许") 属性名:值相同的错误提示。该参数表示如果密码于compareID控件的值相同的错误提示。本参数要在compareID不为空的情况下才会起作用。如果想去掉该校验规则，本参数设置为空即可

onErrorContinueCharString

(默认: "密码字符为连续字符不被允许") 属性名:连续字符的错误提示。默认不允许把连续字符当做密码。例如“123456”是非法密码。如果想去掉该校验规则，本参数设置为空即可

onErrorSameCharString

(默认: "密码字符都相同不被允许") 属性名:字符相同的错误提示。默认不允许把相同字符当做密码。例如“111111”是非法密码。如果想去掉该校验规则，本参数设置为空即可

示例

描述:

密码强度校验。不允许连续字符、不允许字符相同，不允许于用户名相同，对应的错误提示都采用默认值

jQuery 代码:

$("#password1").formValidator({
          pwdTipID:"password1PwdTip", //默认值可以不输入
          onShow:"请输入密码",
          onFocus:"至少1个长度",
          onCorrect:"密码合法"})
      .inputValidator({min:6,max:16,onError:"密码长度错误,请确认"})
      .passwordValidator({
          continueChar:false,
          sameChar:false,
          compareID:"us"

四种提示模式：

固定提示层(FixTip)

自动构建提示层(AutoTip)

单个提示层跟随(SingleTip)

弹出提示内容(AlertTip)

转自：http://www.cnblogs.com/talk/archive/2011/8/25.html