ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能


Posted in Javascript onFebruary 03, 2012

简单来说,jQuery validation插件就是来校验表单form里面元素输入的内容是否满足业务规则,如果不满足,可以给出用户自定义的提示信息。该插件不仅默认有一些校验规则,如校验内容是否为空,内容的长度是否符合给定的值,还可以根据用户自定义业务规则,而且错误提示信息,也可以根据用户的要求自定义显示。看来这个插件的功能确实很强大,是不是迫不及待想使用了。好的,那我们就开始简介如何使用它。
jQuery validation 插件下载地址:http://plugins.jquery.com/project/validate
为了使用这个插件,我们要在form元素上使用方法validate({options});
让我们先快速浏览下插件经常要用到的options:
•rules:由key/value组成,key等于表单元素ID而value表示表单元素内容需要满足的业务规则。
•messages:由key/value组成,key等于表单元素ID而value表示表单元素内容不满足某种业务规则而需要显示的内容。
•errorLabelContainer:指定页面已经定义的一个容器元素,用来放错误信息。
•errorContainer:在errorLabelContainer内表示一个主要的内容区域。
•wrapper:表示在errorLabelContainer元素里面定义一个元素来包装错误信息。
•onsubmit:在表单提交前做验证,能设置为false通过添加其他事件来验证。
•highlight:高亮显示输入无效的内容区域。
•unhighlight:恢复原来被高亮显示的区域。
--------------------------------------------------------------------------------
现在我们开始通过使用jQuery validation插件简单实现用户登录页面验证功能:
1.引入插件:

<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> 
<script src="Scripts/jquery.validate.js" type="text/javascript"></script>后加入界面

2.添加样式:
<style type="text/css"> 
.header 
{ 
background-color: #CCCCCC; 
color: White; 
font-weight: bolder; 
text-align: center; 
} 
.content 
{ 
font-weight: bold; 
border: 1px solid #CCCCCC; 
} 
.alertmsg 
{ 
color: Red; 
} 
.alertmsg li 
{ 
margin-top: 3px; 
margin-bottom: 3px; 
} 
</style>

3.界面代码:
<form id="form1" runat="server"> 
<div align="center"> 
<table cellpadding="3" cellspacing="3" border="0" class="content"> 
<tr> 
<td colspan="2" class="header"> 
登录用户 
</td> 
</tr> 
<tr> 
<td align="right"> 
<asp:Label ID="lblUserName" runat="server" Text="用户名: "></asp:Label> 
</td> 
<td align="left"> 
<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox> 
</td> 
</tr> 
<tr> 
<td align="right"> 
<asp:Label ID="lblPassword" runat="server" Text="密码: "></asp:Label> 
</td> 
<td align="left"> 
<asp:TextBox ID="txtPassword" runat="server" TextMode="Password"></asp:TextBox> 
</td> 
</tr> 
<tr> 
<td align="center" colspan="2"> 
<asp:Button ID="btnSubmit" runat="server" Text="提交" /> <asp:Button ID="btnReset" 
runat="server" Text="重置" /> 
</td> 
</tr> 
</table> 
</div> 
<div align="center" class="alertmsg"> 
</div> 
</form>

4.脚本代码:
<script type="text/javascript"> 
$(document).ready(function () { 
$("#form1").validate({ 
rules: { txtUserName: "required", 
txtPassword: { required: true, minlength: 8 } 
}, 
messages: { txtUserName: "请输入您的姓名", 
txtPassword: { required: "请输入您的密码", minlength: "密码长度必须大于8" } 
}, 
wrapper: "li", // 提示信息按列表包装显示 
errorLabelContainer: $("#form1 div.alertmsg") // 提示信息放入指定的元素内 
}); 
$("#btnReset").click(function (e) { 
e.preventDefault(); 
$("#txtUserName").val(""); 
$("#txtPassword").val(""); 
}); 
}); 
</script>

5.用户名和密码不输入,直接提交,显示界面如下:

ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能


现在已经输入用户名和密码,密码长度输入4位,显示界面如下:

ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能

好了,通过简单实现登录用户验证功能,大家应该对该插件有一个初步认识,后面的章节,会深入学习该插件。
Javascript 相关文章推荐
(JS实现)MapBar中坐标的加密和解密的脚本
May 16 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
Apr 16 Javascript
js中window.open打开一个新的页面
Aug 10 Javascript
javascript编写贪吃蛇游戏
Jul 07 Javascript
js实现新年倒计时效果
Dec 10 Javascript
一些实用性较高的js方法
Apr 19 Javascript
Jquery EasyUI $.Parser
Jun 02 jQuery
去掉vue 中的代码规范检测两种方法(Eslint验证)
Mar 21 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
Jul 23 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
Apr 20 Javascript
详解Vue中使用Axios拦截器
Apr 22 Javascript
vue 移动端注入骨架屏的配置方法
Jun 25 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
Feb 03 #Javascript
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
Feb 03 #Javascript
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
Feb 03 #Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
Feb 03 #Javascript
jQuery表单验证插件formValidator(改进版)
Feb 03 #Javascript
jQuery.extend 函数详解
Feb 03 #Javascript
jquery插件开发方法(初学者)
Feb 03 #Javascript
You might like
PHP生成带有雪花背景的验证码
2006/10/09 PHP
5.PHP的其他功能
2006/10/09 PHP
php AJAX实例根据邮编自动完成地址信息
2008/11/23 PHP
php递归删除目录下的文件但保留的实例分享
2014/05/10 PHP
js window.event对象详尽解析
2009/02/17 Javascript
dropdownlist之间的互相联动实现(显示与隐藏)
2009/11/24 Javascript
js操作时间(年-月-日 时-分-秒 星期几)
2010/06/20 Javascript
Javascript表格翻页效果实现思路及代码
2013/08/23 Javascript
javaScript对文字按照拼音排序实现代码
2013/12/27 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
js Canvas实现圆形时钟教程
2016/09/19 Javascript
jQuery实现文字自动横移
2017/01/08 Javascript
Bootstrap表单制作代码
2017/03/17 Javascript
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
BootStrap modal实现拖拽功能
2018/12/01 Javascript
从组件封装看Vue的作用域插槽的实现
2019/02/12 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
2019/11/25 Javascript
JS Generator 函数的含义与用法实例总结
2020/04/08 Javascript
.netcore+vue 实现压缩文件下载功能
2020/09/24 Javascript
原生js 实现表单验证功能
2021/02/08 Javascript
Python中time模块与datetime模块在使用中的不同之处
2015/11/24 Python
对python 判断数字是否小于0的方法详解
2019/01/26 Python
python如何求数组连续最大和的示例代码
2020/02/04 Python
对Python 字典元素进行删除的方法
2020/07/31 Python
python利用proxybroker构建爬虫免费IP代理池的实现
2021/02/21 Python
英国在线自行车商店:Evans Cycles
2016/09/26 全球购物
Miller Harris官网:英国小众香水品牌
2020/09/24 全球购物
.NET里面什么时候需要调用垃圾回收
2015/06/01 面试题
广告学专业应届生求职信
2013/10/01 职场文书
培训楼经理岗位责任制
2014/02/10 职场文书
房屋买卖授权委托书
2014/09/27 职场文书
财务工作犯错检讨书
2014/10/07 职场文书
党支部反对四风思想汇报
2014/10/10 职场文书
护士个人总结范文
2015/02/13 职场文书
2016七夕情人节寄语
2015/12/04 职场文书
js中Object.create实例用法详解
2021/10/05 Javascript