之前一个项目用过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
分享到:
相关推荐
7. **兼容性**:考虑到浏览器的多样性,formValidator3.5对主流的浏览器(如Chrome、Firefox、Safari、IE9及以上版本)有良好的兼容性。 在使用formValidator3.5的过程中,开发者通常需要完成以下步骤: 1. **引入...
### 使用方法 1. **引入库文件**:在HTML页面中引入jQuery库和formValidator3.5的JS及CSS文件。 2. **标记表单元素**:使用特定的属性(如`data-rule`和`data-msg`)来指定验证规则和错误消息。 3. **初始化验证...
jQuery formValidator是一款强大的JavaScript表单验证插件,它与jQuery 1.3.2库兼容,使得在网页中实现高效且美观的表单验证变得轻而易举。这个3.5a版本的发布旨在提供更加稳定和功能丰富的验证解决方案,以满足...
jQuery_formValidator是一款基于jQuery的表单验证插件,它使得在网页中实现复杂的表单验证变得简单高效。该插件的核心优势在于其轻量级的代码和易于使用的API,允许开发者通过少量的JavaScript代码实现多样化的验证...
本文将深入探讨formValidator3.3的核心功能、使用方法以及一些实用技巧。 一、核心功能 1. 实时验证:formValidator3.3支持实时验证,用户在输入数据时即可看到反馈,无需等待提交表单后才显示错误信息,提供了...
"formValidator-4.1.3" 是一个针对前端表单验证的JavaScript库,主要针对4.1.3版本进行了优化,并确保与之前的3.5版本保持向下兼容性。这个修改版旨在解决开发者在升级到新版本时面临的代码适配问题,避免因升级导致...
### 三、使用方法 1. **引入资源**:首先在HTML文件中引入formvalidator的JS和CSS文件,通常是在`<head>`标签内。 2. **表单元素标记**:在表单元素上添加特定的class或data属性,指定验证规则。 3. **初始化验证...
总结,JQuery FormValidator 4.1.1是一个强大且灵活的前端验证工具,它使得前端数据验证变得更加简单和高效。通过深入理解其核心特性和利用提供的实例与文档,开发者可以有效地提升项目的用户体验和数据质量。
以下是一个简单的使用示例: ```javascript $(document).ready(function() { $("#myForm").formValidator({ onShow: function(input, tip) { tip.show(); }, onHide: function(input, tip) { tip.hide(); } ...
通过下载并研究这个压缩包,开发者能够学习到formValidator的基本用法、验证规则的设定、与ASP.NET的整合方式,以及如何根据项目需求进行自定义。同时,了解如何利用jQuery和辅助插件增强表单验证功能。对于想要提升...
总结,jQuery FormValidator 4.0.1作为一款优秀的前端验证工具,它的强大功能和易用性使得开发者能够快速构建健壮的表单验证系统,极大地提高了开发效率和用户体验。通过深入研究其提供的示例和用户指南,开发者可以...
6. **API扩展**:除了内置的验证规则,formValidator还提供了丰富的API接口,允许开发者扩展新的验证方法或整合其他验证库。 7. **兼容性**:formValidator通常与jQuery或者其他JavaScript库配合使用,兼容主流的...
jQuery.FormValidator.chmjQuery.FormValidator.chmjQuery.FormValidator.chmjQuery.FormValidator.chm
本教程将深入探讨`formvalidator`的核心功能和使用方法,以及如何结合不同的表单控件实现多种验证效果。 ### 1. `formvalidator`简介 `formvalidator`是基于jQuery的前端验证库,它提供了丰富的验证规则和自定义...
`jQuery FormValidator`是一款基于jQuery库的前端表单验证插件,它为开发者提供了一种简单而强大的方式来实现表单验证。这个插件在Web开发领域中颇受欢迎,因为它可以方便地添加验证规则,避免用户提交无效或不完整...
本篇文章将深入探讨jQuery FormValidator插件的核心功能和API用法。 ### 1. 插件安装与引入 在使用FormValidator之前,需要确保已经引入了jQuery库。接着,通过下载`formValidator4.0.1.zip`文件,解压后将`jquery...
在JavaScript中,你可以使用`$.validate`方法初始化FormValidator。这个方法接受一个配置对象,其中包含了各种设置,例如验证规则、提示信息、错误显示方式等。例如: ```javascript $.validate({ modules : 'date...
然后,通过选择器找到要进行验证的表单元素,并调用`.formValidator()`方法,配置相应的验证规则和错误提示。例如: ```html <script src="jquery.js"></script> <script src="jquery.formValidator.min.js"> ...
2. **设置验证规则**:通过jQuery选择器定位表单元素,然后使用`.formValidator()` 方法设置验证规则和错误提示信息。 3. **触发验证**:可以设置自动验证(如失去焦点时),也可以手动调用`.validate()` 方法进行...