jquery学习之表单验证

我们从事的工作中一般很少涉及到UI的部分，之前我对UI实在是了解的非常少，总想把UI的这部分的缺陷补上来，所有打

 

算抽点时间学习下jquery。

 

 

在web开发中，表单验证应该是一个常见的校验之一，关于jquery表单验证这方面的资料也非常的丰富。在这里采用的是

 

jquery表单的校验框架。

 

 

一个简单的表单提交，通过jquery框架来校验表单字段。

 

实现该功能可以分为以下几步：

 

 

1.导入相关的js文件

 

 

<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript" src="formValidator-4.0.1.js"></script>
<script type="text/javascript" src="formValidatorRegex.js"></script>
<script type="text/javascript" src="DateTimeMask.js"></script>
<link type="text/css" rel="stylesheet" href="style/validator.css"></link>

 

 

 

2.初始化表单校验方法

 

 $(document).ready(function() {
  $.formValidator.initConfig({
   formID : "form1",
   debug : false,
   submitOnce : true,
   onError : function(msg, obj, errorlist) {
    $("#errorlist").empty();
    $.map(errorlist, function(msg) {
     $("#errorlist").append("<li>" + mgs + "</li>");
    });
   },
   submitAfterAjaxPrompt : '有数据正在异步验证，请稍等...'
  });

 

 

3.编写校验的字段信息

 

例如年龄校验： 

 

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

 

如果是电话号码校验，可以采用正则表达式。

 

$("#lxdh").formValidator({
         empty : true,
         onShow : "请输入你的联系电话，可以为空哦",
         onFocus : "格式例如：0755-88888888",
         onCorrect : "谢谢你的合作",
         onEmpty : "你真的不想留联系电话了吗？"
        }).regexValidator({
           regExp : "^(([0\\+]\\d{2,3}-)?(0\\d{2,3})-)?(\\d{7,8})(-(\\d{3,}))?$",
           onError : "你输入的联系电话格式不正确"
      });

 

 

 

关于表单校验中的相关属性说明

 juery formvalidator插件 API帮助文档

目前支持4种大的校验方式，分别是：InputValidator（针对input、textarea、select控件）、CompareValidator、AjaxValidator、RegexValidator、FunctionValidator
每种格式支持的控件类型如下：

	input	textarea	select
校验方式	text	radio	checkbox	file	password	textarea	select-one
InputValidator	√	√	√	√	√	√	√
CompareValidator	√			√	√	√
AjaxValidator	√			√	√	√	√
RegexValidator	√			√	√	√
FunctionValidator	√	√	√	√	√	√	√

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

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

formValidator:

用来做初始化的类型，必须先执行

属性	属性名称	默认值	showword	showalert	详细解释
validatorGroup	校验组	"1"	√	√	一个页面的控件可以分成多个组，分开校验
empty	是否可以为空	false	√	√
automodify	输入错误离开焦点的时候，自动修复错误	false	√	√	先给出提示然后，自动修复，目前只支持text、file、textarea三种类型
onempty	空时候的提示	"输入内容为空"	√		可以为空，为空时候的提示
onshow	显示时候的提示	"请输入内容"	√
onfocus	获得焦点的提示	"请输入内容"	√
oncorrect	输入正确后的提示	"输入正确"	√		当你焦点离开控件的时候，如果输入正确将出现该提示
onvalid	校验通过后的回调函数	null	√	√	参数1：对象本身 参数2：值 校验通过后，你还希望执行一些操作，你可以通过这个属性来执行。
onfocusevent	获得焦点后要追加的回调函数	null	√	√	参数1：对象本身
onblurevent	失去焦点后要追加的回调函数	null	√	√	参数1：对象本身
tipid	显示错误的容器ID	表单ID+"Tip"	√
defaultvalue	默认值	null	√	√	所有input和select表单。如果你不设置就保持原值，一旦设置就设为默认值。

InputValidator：

属性	属性名称	默认值	详细解释
type	比较类型	"size"	(对select无效)"size":表示比较长度 "value":比较值。
min	最小长度/值	0	(对select无效)
max	最大长度/值	99999999999999	(对select无效)
onerror	发生错误的提示	"输入错误"
defaultvalue	默认值	null	能满足预设默认值的需求

CompareValidator：

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

RegexValidator:

属性	属性名称	默认值	详细解释
regexp	正则表达式	""	采用的是显式构造函数new RegExp("pattern"[,"flags"]); 由于Javascript 中'\' 被用作转义字符，所以在使用显示构造函数构造实例对象的时候，需要使用'\\' 代替'\'
param	附加参数	"i"	g：代表可以进行全局匹配。 i：代表不区分大小写匹配。 m：代表可以进行多行匹配。 可以任意组合,当然也可以不加参数
datatype	数据类型	"string"	"string":自己写的表达式，"enum":枚举名。具体请见demo3.htm，你可以自己修改附加pageValidatorRegex.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
error	当请求失败时调用的函数	"请求失败"	你可以自己定义这个错误，在error里自动打出

公共函数:

主要是设置全局参数和判断是否通过校验

函数名

函数说明

jQuery.formValidator.initConfig

参数：配置类型

属性	默认值	说明
validatorGroup	"1"	你要针对哪个组进行配置
alertMessage	false	是否弹出窗口
onSuccess	null	该组校验通过后的回调函数,返回false，阻止表单的提交
submitOnce	false	校验通过后，是否灰掉所有的提交按钮
onError	null	该组校验失败后的回调函数

jQuery.formValidator.PageIsValid

一个参数： 不是配置类型

validatorGroup

"1"

你要针对哪个组进行验证

jQuery.formValidator.IsOneValid

一个参数： 当时设置验证的表单元素ID。
返回是否校验成功的信息。

jQuery.formValidator.SetFailState

function("tipid","显示的信息")
在showword模式下，如果你的额外校验没有通过，你可以通过它来设置成失败信息和状态

jQuery.formValidator.GetLength

function("表单元素id")
判断表单元素的选择长度(个数)
checkbox或radiobutton表示选择的个数。
select表示选择的selectedIndex值。
其它的表示字符长度。

问答：

1、如何实现一个控件，根据不同的情况，实现不同的控制？

你只需要在你的不同种情况下，重新设置你的【一行代码】

2、一个页面上我有几个tab页，如何实现每个Tab页上的控件单独校验？

每个Tab页上需要校验的控件，你在写【一行代码】的时候，显示的声明组号

3、我采用的页面上文字问题的方式，点提交的时候，有校验未通过的，除了文字提示外，还可以再弹出窗口提示吗？

这个问题很简单，你只要设置改组的全局配置，
jQuery.formValidator.initConfig({onError:function(){alert("有部分校验没有通过，请看页面具体提示");}})

4、所有校验通过后，我还要再做别的判断可以吗？我自己的判断没有通过可以中断提交吗？

同样很简单，你页只需设置该组的全局配置，
jQuery.formValidator.initConfig({onSuccess:function()
{
if(你的额外判断失败)
    return false;
else
    return true;
}})

5、我有一组的checkbox（radiobutton）如何设置校验？

你只需在该组的第一个checkbox上设置校验信息即可，具体请参考demo1里的范例
如果你该组的第一个控件的ID ，你可以这么写:$("sex_1").InputValidator({...})
如果你只知道该组的name，你可以这么写:$("input:check[@name='sex']").slice(0,1).InputValidator({...})

6、我有2个表单元素，任意一个元素输入东西就算验证通过，如何写代码？比如要求输入中文名字和英文名字任意一个即算校验通过。

正在开发这个功能

7、一个表单元素校验通过了，但是我想额外再进行其它的校验，出错要自定义错误，如何写代码？

$("#ewjy").formValidator({onshow:"无论你输入什么，都会提示你额外校验出错，错误信息自定义",onfocus:"至少输入一个字符",oncorrect:"你怎么可能输入正确了，难道是bug?",onvalid:function(){$.formValidator.SetFailState("ewjyTip","额外校验失败");alert("额外校验失败");return false;}}).InputValidator({min:1,onerror:"这里至少要一个字符,请确认"});

8、如何让赋了初始值的表单元素默认校验通过

$("#xueli").formValidator({onshow:"请选择你的学历",onfocus:"学历必须选择",oncorrect:"谢谢你的配合",defaultvalue:"b"}).InputValidator({onerror: "你是不是忘记选择学历了!"}).DefaultPassed();