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 flash下fromCharCode和charCodeAt方法使用说明
Jan 12 Javascript
js导航栏单击事件背景变换示例代码
Jan 13 Javascript
高性能JavaScript DOM编程(1)
Aug 11 Javascript
使用jQuery处理AJAX请求的基础学习教程
May 10 Javascript
JS原型对象的创建方法详解
Jun 16 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
Jan 13 Javascript
jQuery实现弹窗居中效果类似alert()
Feb 27 Javascript
bootstrap实现的自适应页面简单应用示例
Mar 09 Javascript
ES6模板字符串和标签模板的应用实例分析
Jun 25 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
Sep 02 Javascript
解决vue-cli 打包后自定义动画未执行的问题
Nov 12 Javascript
Javascript 解构赋值详情
Nov 17 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/11/25 PHP
使用php get_headers 判断URL是否有效的解决办法
2013/04/27 PHP
PHP常用的三种设计模式汇总
2016/08/28 PHP
PHP封装的非对称加密RSA算法示例
2018/05/28 PHP
PHP copy函数使用案例代码解析
2020/09/01 PHP
javascript中判断一个值是否在数组中并没有直接使用
2012/12/17 Javascript
javascript事件冒泡实例分析
2015/05/13 Javascript
Jquery元素追加和删除的实现方法
2016/05/24 Javascript
详解JavaScript中双等号引起的隐性类型转换
2016/05/30 Javascript
最好用的Bootstrap fileinput.js文件上传组件
2016/12/12 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
2017/06/04 Javascript
Angular2 组件间通过@Input @Output通讯示例
2017/08/24 Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
2017/10/13 Javascript
Webpack 之 babel-loader文件预处理器详解
2018/03/23 Javascript
angular1.x ui-route传参的三种写法小结
2018/08/31 Javascript
在Vue-cli里应用Vuex的state和mutations方法
2018/09/16 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
2020/05/03 Javascript
通过实例解析jQ Ajax操作相关原理
2020/09/23 Javascript
[53:23]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
[01:46]新英雄登场
2019/09/10 DOTA
[43:47]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第一场 12.09
2020/12/11 DOTA
Python和GO语言实现的消息摘要算法示例
2015/03/10 Python
python实现模拟按键,自动翻页看u17漫画
2015/03/17 Python
Python中的类与对象之描述符详解
2015/03/27 Python
python计算列表内各元素的个数实例
2018/06/29 Python
Python 中判断列表是否为空的方法
2019/11/24 Python
tornado+celery的简单使用详解
2019/12/21 Python
详解Canvas事件绑定
2018/06/27 HTML / CSS
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
2018/01/08 HTML / CSS
巴西男士胡须和头发护理产品商店:Beard
2017/11/13 全球购物
ESDlife健康生活易:身体检查预订、搜寻及比较
2019/05/10 全球购物
super关键字的用法
2012/04/10 面试题
3的组成教学反思
2014/04/30 职场文书
2014领导班子四风问题对照检查材料思想汇报
2014/09/21 职场文书
初中中等生评语
2014/12/29 职场文书
Python自动化之批量处理工作簿和工作表
2021/06/03 Python