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

针对input、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();
          

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

选项

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次密码不一致,请确认"
      });

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

选项

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 : "正在对用户名进行合法性校验，请稍候..."
          })

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

选项

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:"你输入的手机或电话格式不正确"
      });

利用外部函数来做校验

选项

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 "该用户名包含保留关键字"}
      }});

对密码强度进行校验

选项

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"