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

贡可人
2023-12-01

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)

 

 

 

 

 


 

 

转载于:https://www.cnblogs.com/talk/archive/2011/08/25/2152777.html

 类似资料: