jquery学习之表单验证
我们从事的工作中一般很少涉及到UI的部分，之前我对UI实在是了解的非常少，总想把UI的这部分的缺陷补上来，所有打
算抽点时间学习下jquery。
在web开发中，表单验证应该是一个常见的校验之一，关于jquery表单验证这方面的资料也非常的丰富。在这里采用的是
jquery表单的校验框架。
一个简单的表单提交，通过jquery框架来校验表单字段。
实现该功能可以分为以下几步：
1.导入相关的js文件
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<scripttype="text/javascript"src="formValidator-4.0.1.js"></script>
<scripttype="text/javascript"src="formValidatorRegex.js"></script>
<scripttype="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 | |||||
| InputValidator | √ | √ | √ | √ | √ | √ | √ |
| CompareValidator | √ | √ | √ | √ | |||
| AjaxValidator | √ | √ | √ | √ | √ | ||
| RegexValidator | √ | √ | √ | √ | |||
| FunctionValidator | √ | √ | √ | √ | √ | √ | √ |
插件目前提示错误，有两种模式：showword和showalert,即文字提示和窗口提示，下面的5大验证方式，针对showalert这种方式不是都必须的，有些配置是没有作用的
下面分别罗列全局初始化和5种校验方式公开的属性
用来做初始化的类型，必须先执行属性属性名称默认值showwordshowalert详细解释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""要跟源目标进行比较的目标IDoperateor比较符号"="一共有如下几种类型:=、!=、>、>=、<、<=datatype数据类型"string"目前只支持2种:"string"、"number"onerror发生错误的提示"输入错误"RegexValidator:属性属性名称默认值详细解释正则表达式""采用的是显式构造函数newRegExp("pattern"[,"flags"]);由于Javascript中'\'被用作转义字符，所以在使用显示构造函数构造实例对象的时候，需要使用'\\'代替'\'附加参数"i"g：代表可以进行全局匹配。i：代表不区分大小写匹配。
m：代表可以进行多行匹配。
可以任意组合,当然也可以不加参数
数据类型"string""string":自己写的表达式，"enum":枚举名。具体请见demo3.htm，你可以自己修改附加pageValidatorRegex.js里的枚举项目名和表达式。发生错误的提示"输入错误"AjaxValidator:几乎所有的属性跟$.ajax()的属性一样，请参考$.ajax()函数的帮助属性属性名称默认值详细解释type请求的类型"GET""POST"或"GET"url发送到的URL地址""datatype返回的数据类型"html"xml、html、script、jsondata数据""async是否以异步的方式发送truesuccess当请求成功时调用的函数nullprocessdata自动处理返回的数据为字符串true在默认的情况下，如果data选项传进的数据是一个对象而不是字符串，将会自动地被处理和转换成一个查询字符串complete当请求完成时调用的函数nullbeforesend当请求前时调用的函数nullerror当请求失败时调用的函数"请求失败"你可以自己定义这个错误，在error里自动打出公共函数:主要是设置全局参数和判断是否通过校验函数名函数说明jQuery.formValidator.initConfig参数：配置类型属性默认值说明validatorGroup"1"你要针对哪个组进行配置alertMessagefalse是否弹出窗口onSuccessnull该组校验通过后的回调函数,返回false，阻止表单的提交submitOncefalse校验通过后，是否灰掉所有的提交按钮onErrornull该组校验失败后的回调函数jQuery.formValidator.PageIsValid一个参数：不是配置类型validatorGroup"1"你要针对哪个组进行验证jQuery.formValidator.IsOneValid一个参数：当时设置验证的表单元素ID。返回是否校验成功的信息。
jQuery.formValidator.SetFailStatefunction("tipid","显示的信息")在showword模式下，如果你的额外校验没有通过，你可以通过它来设置成失败信息和状态
jQuery.formValidator.GetLengthfunction("表单元素id")判断表单元素的选择长度(个数)
checkbox或radiobutton表示选择的个数。
select表示选择的selectedIndex值。
其它的表示字符长度。
问答：1、如何实现一个控件，根据不同的情况，实现不同的控制？你只需要在你的不同种情况下，重新设置你的【一行代码】2、一个页面上我有几个tab页，如何实现每个Tab页上的控件单独校验？每个Tab页上需要校验的控件，你在写【一行代码】的时候，显示的声明组号3、我采用的页面上文字问题的方式，点提交的时候，有校验未通过的，除了文字提示外，还可以再弹出窗口提示吗？这个问题很简单，你只要设置改组的全局配置，jQuery.formValidator.initConfig({onError:function(){alert("有部分校验没有通过，请看页面具体提示");}}) 4、所有校验通过后，我还要再做别的判断可以吗？我自己的判断没有通过可以中断提交吗？同样很简单，你页只需设置该组的全局配置，
jQuery.formValidator.initConfig({onSuccess:function()
{
if(你的额外判断失败)
returnfalse;
else
returntrue;
}})
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();