• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

ASP.NETjQuery食谱11(通过使用jQueryvalidation插件简单实现用户登录页面验证功能) ...

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

从这节开始,我们开始学习如何在ASP.NET控件中使用jQuery validation 插件,首先要用它,必须先了解它有什么用。简单来说,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="提交" />&nbsp;<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.用户名和密码不输入,直接提交,显示界面如下:

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

 

好了,通过简单实现登录用户验证功能,大家应该对该插件有一个初步认识,后面的章节,会深入学习该插件。

 






鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap