首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

formValidator3.5的温习及简单用法的总结

2012-10-17 
formValidator3.5的复习及简单用法的总结之前一个项目用过formValidator,即使是后来做完了整个项目,当时甚

formValidator3.5的复习及简单用法的总结
之前一个项目用过formValidator,即使是后来做完了整个项目,当时甚至仍可以说不会用formValidator,因为完全是照葫芦画瓢。但已经对它有了感性的认识,这对以后真正想去学的时候是很有帮助的。而今接收新项目,又用到了formValidator,项目并不是很紧张,故决定好好看一下,并以理解为前提的总结一下它的简单使法。
首先,formValidator是jquery的扩展包,使用它要先引用进来才行:需要如下四个

<script src="jquery_last.js" type="text/javascript"></script>//加载jQuery类库
<link type="text/css" rel="stylesheet" href="style/validator.css"></link>
<script src="formValidator.js" type="text/javascript"></script>
<script src="formValidatorRegex.js" type="text/javascript"></script>//加载扩展库

接下来,开始用了。
1.首先初始化全局参数
   $.formValidator.initConfig({
      validatorgroup:"targetGroupName",//名字随便起,此处是定义一个校验组,后面会用到
      errorfocus:false,//发生错误的时候,第一个出错控件是否获得焦点,默认是true,所以一般改为false
      submitonce:true,//校验通过后,是否灰掉所有的提交按钮(防止重复提交),默认是false,所以一般改为true
      onerror:function(msg){alert(msg);},//该组校验失败后的回调函数,参数为校验没有通过的错误信息
      onsuccess:function(){return true;}//该组校验通过后的回调函数,返回false,阻止表单的提交
   });
2.初始化全局参数了之后就可以使用了,如
       $("#targetEle").formValidator({validatorgroup:"targetGroupName",onfocus:"请填写话题名称"}).inputValidator({min:1,empty:{leftempty:false,rightempty:false,emptyerror:"两边不能有空符号"},onerror:"话题名称不能为空"});
       targetEle是你要校验的表单元素的Id,与此同时,与此表单元素配对的,还需要有一个Id为targetEleTip的label元素(自己定义,一般就直接写在表单元素后面),这个label元素是formValidator验证框架两种错误提示模式之一的“文字提示”所必须的(还有一种叫窗口提示);
       后面紧跟的formValidator(xxx)也是用来做初始化的,必须先执行,那么它是初始化什么呢,其实通过上面的代码就可以看出:一方面它初始化此表单元素属于哪个校验组,另一方面初始化当焦点到达此表单元素时,紧跟在表单元素后面的label元素里给出的提示性文字。
       到此为止是我觉得理解formValidator验证框架比较费劲的地方,至于后面的inputValidator(属于目前支持的5种大的校验方式之一)就可以通过查看说明文档了。

说明文档参考地址:http://hi.baidu.com/pplboy/blog/item/5ff02dc4571436af8326ac27.html



热点排行