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,有空研究学习下
Jan 25 Javascript
javaScript实现浮点数转十六进制字符
Oct 29 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
May 08 Javascript
Javascript技术难点之apply,call与this之间的衔接
Dec 04 Javascript
AngularJS执行流程详解
Feb 17 Javascript
vue.js利用defineProperty实现数据的双向绑定
Apr 28 Javascript
Node.js Express安装与使用教程
May 11 Javascript
jquery实现搜索框功能实例详解
Jul 23 jQuery
详解webpack 热更新优化
Sep 13 Javascript
Node.js Event Loop各阶段讲解
Mar 08 Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
May 29 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
Nov 05 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 调试工具Debug Tools
2011/04/30 PHP
php实现批量下载百度云盘文件例子分享
2014/04/10 PHP
php字符串按照单词进行反转的方法
2015/03/14 PHP
PHP实现的迷你漂流瓶
2015/07/29 PHP
PHP的Laravel框架结合MySQL与Redis数据库的使用部署
2016/03/21 PHP
原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】
2019/03/07 PHP
写出更好的JavaScript之undefined篇(上)
2009/11/22 Javascript
Javascript attachEvent传递参数的办法
2009/12/14 Javascript
jQuery技巧总结
2011/01/01 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
2013/04/26 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
2015/06/24 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
2020/04/20 Javascript
jquery实现页面常用的返回顶部效果
2016/03/04 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
2016/05/03 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
2016/09/27 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
2017/04/19 Javascript
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
bootstrap日期插件daterangepicker使用详解
2017/10/19 Javascript
解决一个微信号同时支持多个环境网页授权问题
2019/08/07 Javascript
微信小程序云函数添加数据到数据库的方法
2020/03/04 Javascript
Vue 的 v-model用法实例
2020/11/23 Vue.js
复制粘贴功能的Python程序
2008/04/04 Python
用python实现批量重命名文件的代码
2012/05/25 Python
闭包在python中的应用之translate和maketrans用法详解
2014/08/27 Python
Python的Flask站点中集成xhEditor文本编辑器的教程
2016/06/13 Python
python 添加用户设置密码并发邮件给root用户
2016/07/25 Python
Python中的上下文管理器和with语句的使用
2018/04/17 Python
Python.append()与Python.expand()用法详解
2019/12/18 Python
Python numpy大矩阵运算内存不足如何解决
2020/11/19 Python
详解HTML5中的manifest缓存使用
2015/09/09 HTML / CSS
信息技术毕业生自荐信范文
2014/03/13 职场文书
就业协议书的作用
2014/04/11 职场文书
弘扬民族精神演讲稿
2014/05/07 职场文书
卫生厅领导班子党的群众路线教育实践活动整改措施
2014/09/20 职场文书
执法作风整顿剖析材料
2014/10/11 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书