`

注册页面 FormValidator插件 使用

阅读更多

最近修改注册页面
尝试使用了JQuery的一个插件 FormValidator插件 主要是实现注册页面的的判断,功能很棒。
使用该插件的时候:首先要根据自己的所需验证:
添加文件即可:比如我引入了,
<link type="text/css" rel="stylesheet" href="../css/validator.css"></link>
<script src="../../js/jquery.js" type="text/javascript" charset="UTF-8"></script>
<script src="../../js/formValidator.js" type="text/javascript" charset="UTF-8"></script>
<script src="../../js/formValidatorRegex.js" type="text/javascript" charset="UTF-8"></script>
这四个文件 不能少了。
之后我使用了 脚本语言:
<script type="text/javascript">
$(document).ready(function()
{

$.formValidator.initConfig({formid:"form1",onerror:function(msg){alert(msg)},onsuccess:function(){alert('ddd');return false;}});//这一句起在提交前的判断作用,就是如果其中有一个验证为空 ,就不可以提交页面数据

$("#test1").formValidator({onshow:"请输入用户名",onfocus:"用户名至少6个字符,最多10个字 符",oncorrect:"该用户名可以注册"}).inputValidator({min:6,max:10,onerror:"用户名不能为空, 请确认"});
$("#password1").formValidator({onshow:"请输入密码",onfocus:"密码不能为 空",oncorrect:"密码合法"}).inputValidator({min:1,empty: {leftempty:false,rightempty:false,emptyerror:"密码两边不能有空符号"},onerror:"密码不能 为空,请确认"});
$("#password2").formValidator({onshow:"请输入重复密码",onfocus:"两次密码必须一致 哦",oncorrect:"密码一致"}).inputValidator({min:1,empty: {leftempty:false,rightempty:false,emptyerror:"重复密码两边不能有空符号"},onerror:"重复 密码不能为空,请确 认"}).compareValidator({desid:"password1",operateor:"=",onerror:"2次密码不一致, 请确认"});
$("#email").formValidator({onshow:"请输入邮箱",onfocus:"邮箱6-100个字符,输入正确了才能离开焦 点",oncorrect:"恭喜你,你输对 了",defaultvalue:"@",forcevalid:true}).inputValidator({min:6,max:100,onerror:" 你输入的邮箱长度非法,请确认"}).regexValidator({regexp:"^([//w-.]+)@(([[0-9]{1,3}. [0-9]{1,3}.[0-9]{1,3}.)|(([//w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3}) (]?)$",onerror:"你输入的邮箱格式不正确"});

</script>

然后再在我的页面进行操作:
例如:其中之一:
<tr>
<td align="right">用户名:</td>
<td><input type="text" id="test1" style="width:148px" runat="server"/></td>
<td><div id="test1Tip" style="width:250px"></div></td>
</tr>
效果很炫。
差点忘了说:使用的时候也要把图片文件夹images拷贝过来,同时注意validator.css 中图片的相对位置。我之前没注意!
总之,发现JQuery 很棒,真的是用代码少 功能多。这个插件是国内一个高手写的(现在已是开源了)。有空大家搜索一下。
网址:http://www.cnblogs.com/wzmaodong/archive/2009/03/03/1402635.html

分享到:
评论

相关推荐

    jquery 的 formvalidator插件使用 多选项卡的弹出层效果

    在本文中,我们将深入探讨如何使用jQuery的formvalidator插件来实现一个复杂的注册页面,其中包含多选项卡和弹出层效果。这个插件是用于前端表单验证的强大工具,可以确保用户输入的数据符合预设的规则,提高用户...

    jQuery formValidator表单验证插件4.1.3提供下载

    jQuery formValidator表单验证插件,它是基于jQuery类库,实现了js脚本于页面html代码的分离。你可以划分多个校验组,每个组的校验都是互不影响。对一个表单对象,你只需要写一行代码就可以轻松实现无数种(理论上)...

    jQuery formValidator表单验证插件示例源码.rar

    使用jQuery formValidator时,首先需要在页面中引入jQuery库和formValidator的相关文件。然后,通过选择器找到要进行验证的表单元素,并调用`.formValidator()`方法,配置相应的验证规则和错误提示。例如: ```html...

    jquery表单注册验证formvalidator4.1.3完整下载

    首先,你需要在项目中引入jQuery库和FormValidator插件。如果已经安装了jQuery,只需下载FormValidator 4.1.3压缩包,并在HTML文件中引入相应的CSS和JS文件: ```html &lt;link rel="stylesheet" href="path/to/...

    FormValidator.zip(使用jquery-validate实现注册界面表单验证)

    本项目"FormValidator.zip"包含了一个使用 `jquery-validate` 实现的注册界面表单验证的示例源码。 `jQuery Validate` 插件的核心功能包括: 1. **基本验证**:它可以自动检查表单字段是否为空、是否为邮箱格式、...

    商业编程-源码-jQuery formValidator表单验证插件示例源码.zip

    jQuery formValidator插件是一款强大的前端验证工具,专为jQuery设计,能够帮助开发者轻松实现复杂的表单验证功能。本篇将详细介绍该插件的核心概念、使用方法以及常见应用场景。 一、jQuery formValidator插件简介...

    jQuery formValidator表单验证插件

    综上所述,jQuery formValidator插件凭借其强大的功能和易于使用的特性,成为了开发者在构建表单验证时的得力工具。合理地利用这个插件,不仅能有效提升表单验证的效率,还能为用户提供更优质的交互体验。在实际开发...

    jquery 表单校验的插件formValidator4.01

    5. **可扩展性**:jQuery FormValidator允许与其他jQuery插件(如Bootstrap、jQuery UI等)无缝集成,增强了插件的适用范围。 6. **丰富的验证规则**:包括但不限于数字、字母、长度、URL、日期、时间等,覆盖了...

    formValidator3.3

    在实际项目中,formValidator3.3可以广泛应用于注册、登录、评论等场景,通过灵活的配置和扩展,可以实现复杂的验证逻辑,提升项目的质量与用户体验。 总结,formValidator3.3作为一款强大的jQuery验证插件,其简洁...

    jQuery formValidator3.3表单验证文档说明

    1. **加载 jQuery 类库**:首先,需在页面中引入 jQuery 类库,这是使用 formValidator 插件的基础。 2. **加载插件样式库**:接下来,链接 validator.css 或 validatorAuto.css 样式文件,前者用于基本样式,后者...

    Jquery表单验证插件formValidator使用方法

    本文将详细介绍formValidator插件的使用方法,帮助开发者快速上手并实施表单验证。 首先,为了使用formValidator插件,需要在项目中引入必要的JavaScript和CSS文件。这些文件包括核心的jQuery库、formValidator插件...

    jQuery formValidator表单验证插件开源了 含API帮助、源码、示例

    在实际应用中,formValidator插件的使用场景非常广泛,从简单的登录注册表单到复杂的在线问卷调查,都可以通过该插件进行有效的前端数据校验。该插件的开源性质也使得开发者可以自由地查看和修改源码,以适应特定...

    jQuery formValidator 表单校验插件 4.1.0

    jQuery formValidator表单验证插件,它是基于jQuery类库,实现了js脚本于页面html代码的分离。你可以划分多个校验组,每个组的校验都是互不影响。对一个表单对象,你只需要写一行代码就可以轻松实现无数种脚本控制。...

    formvalidator4.1

    jQuery formValidator表单验证插件是客户端表单验证插件。 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等。在这之前,页面开发者(JavaScript开发者)需要...

    jquery formvalidator公共验证

    通过使用`$.formUtils.addValidator()`函数,可以注册新的验证规则,这极大地增强了框架的灵活性和可扩展性。 ```javascript $.formUtils.addValidator({ name : 'custom', validatorFunction : function(value, ...

    jQuery formValidator3.1

    使用jQuery formValidator3.1,首先需要在页面中引入jQuery库和formValidator的JS文件,以及对应的CSS样式文件。然后,只需在需要验证的表单元素上添加特定的属性或类名,并设置相应的验证规则。 四、配置与规则...

    jQuery表单验证+日期插件

    - formValidator通常与AJAX结合使用,可以在不刷新页面的情况下发送验证请求,增强交互性。 2. **jQuery datepicker**: - jQuery UI中的datepicker是一个流行的时间和日期选择器组件,它提供了丰富的样式和配置...

    jQuery pageValidator.rar

    《jQuery formValidator插件详解与应用实践》 jQuery formValidator是一款功能强大的JavaScript验证插件,它使得在网页表单验证中实现复杂逻辑变得轻而易举。本篇将深入探讨该插件的API用法,结合示例代码,帮助...

    asp.net 中jquery应用验证注册信息实例【推荐】

    `jQuery formValidator`可能是这个实例中使用的第三方验证插件,它可以提供更复杂的验证功能,如正则表达式匹配、远程验证等。安装并引入这个插件后,可以按照插件文档中的指南配置验证规则,以增强验证功能。 总结...

Global site tag (gtag.js) - Google Analytics