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 相关文章推荐
增强的 JavaScript 的 trim 函数的代码
Aug 13 Javascript
30个精美的jQuery幻灯片效果插件和教程
Aug 23 Javascript
JS特权方法定义作用以及与公有方法的区别
Mar 18 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
May 30 Javascript
Textarea根据内容自适应高度
Oct 28 Javascript
FireBug 调试JS入门教程 如何调试JS
Dec 23 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
Nov 18 Javascript
Angularjs中date过滤器失效的问题及解决方法
Jul 06 Javascript
Vue自定义弹窗指令的实现代码
Aug 13 Javascript
vue监听对象及对象属性问题
Aug 20 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
Mar 19 Javascript
Vuex中的Mutations的具体使用方法
Jun 01 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时的知识积累总结
2013/06/07 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
PHP获取本周所有日期或者最近七天所有日期的方法
2018/06/20 PHP
php新建文件的方法实例
2019/09/26 PHP
js 图片等比例缩放代码
2010/05/13 Javascript
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
页面装载js及性能分析方法介绍
2014/03/21 Javascript
JavaScript中对象property的读取和写入方法介绍
2014/12/30 Javascript
jQuery中position()方法用法实例
2015/01/16 Javascript
jQuery插件实现适用于移动端的地址选择器
2016/02/18 Javascript
浅谈js中的in-for循环
2016/06/28 Javascript
利用Angularjs实现幻灯片效果
2016/09/07 Javascript
D3.js实现柱状图的方法详解
2016/09/21 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
2017/05/12 Javascript
Textarea输入字数限制实例(兼容iOS&amp;安卓)
2017/07/06 Javascript
Vue2.0 实现移动端图片上传功能
2018/05/30 Javascript
jquery 验证用户名是否重复代码实例
2019/05/14 jQuery
LayUI switch 开关监听 获取属性值、更改状态的方法
2019/09/21 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
2020/11/04 Javascript
python 布尔操作实现代码
2013/03/23 Python
Python3实现从文件中读取指定行的方法
2015/05/22 Python
Python使用xlrd模块操作Excel数据导入的方法
2015/05/26 Python
用matplotlib画等高线图详解
2017/12/14 Python
numpy找出array中的最大值,最小值实例
2018/04/03 Python
Python利用openpyxl库遍历Sheet的实例
2018/05/03 Python
Python3实现从排序数组中删除重复项算法分析
2019/04/03 Python
python scrapy重复执行实现代码详解
2019/12/28 Python
印度领先的在线时尚商店:Koovs
2016/08/28 全球购物
数组越界问题
2015/10/21 面试题
国际商务系学生个人的自我评价
2013/11/26 职场文书
木工主管岗位职责
2013/12/08 职场文书
运动会广播稿150字
2014/02/19 职场文书
办公室打字员岗位职责
2014/04/16 职场文书
党的群众路线教育实践活动制度建设计划方案
2014/10/31 职场文书
2015年大学班主任工作总结
2015/04/30 职场文书
学生退学证明
2015/06/23 职场文书