ASP.NET jquery实例11利用jQuery验证插件简单实现了用户登录页面验证功能

简单来说，jQuery验证插件就是检查表单中元素输入的内容是否符合业务规则，如果不符合，可以给出用户自定义的提示信息。插件不仅默认有一些检查规则，比如检查内容是否为空，内容长度是否满足给定值，还可以根据用户自定义业务规则，也可以根据用户的要求显示错误消息。看来这个插件真的很厉害。迫不及待想用它？好，让我们开始介绍如何使用它。jQuery验证插件下载地址：http://plugins.jquery.com/project/validate为了使用这个插件，我们需要在表单元素上使用validate({options})方法；让我们快速了解一下插件经常使用的选项：Rules:由key/value组成，其中key等于表单元素ID，value表示表单元素内容需要满足的业务规则。messages:由key/value组成，其中key等于表单元素ID，value表示因为不符合某个业务规则而需要显示的表单元素内容。errorLabelContainer:指定页面上已经定义的容器元素，用于放置错误消息。errorContainer:代表errorLabelContainer中的一个主要内容区域。wrapper:意味着在errorLabelContainer元素中定义一个元素来包装错误信息。onsubmit:在提交表单之前进行验证，可以设置为false，通过添加其他事件进行验证。高亮显示输入无效的内容区域。unhighlight:恢复之前突出显示的区域。- .script src=' http : script/jquery-1 . 4 . 1-vsdoc . js ' type=' text/JavaScript '/script script src=' http : script/jquery . validate . js ' type=' text/JavaScript后添加接口'/script 2。添加样式：复制代码如下： styletype=' text/CSS '。标题{ background-color : # cccc；颜色：白色；字体粗细：更粗；文本对齐：中心；} .内容{ font-weight : bold；border: 1px固体# CCCCCC；} .alertmsg { color: Red} .alertmsg Li { margin-top : 3px；保证金-底部： 3px；}/Style 3。接口代码：复制的代码如下： form ID=' form 1 ' runat=' server ' div align=' center '表格单元格填充=' 3 '单元格间距=' 3 '边框=' 0 ' class=' content ' tr TD c . Olspan=' 2 ' class=' header '登录用户/TD/tr TD align=' right ' ASP 3360标签id=' LBL用户名' runat=' server' text='用户名：'/ASP 3360标签/td td align='left' asp3 Tr TD align=' right' ASP :标签id=' LBL密码' runat=' server ' text=' Password:'/asp3360标签/TD align=' left ' asp: textbox ID=' txt Password ' runat=' server ' text mode=' Password '/asp: text box/TD/Tr TD align=' center ' colspan=' 2 ' ASP :按钮ID=' BTN submit ' runat=' server ' text=' submit '/' 脚本代码：复制的代码如下： script type=' text/JavaScript ' $(文档)。就绪(功能()。{ $('#form1 ')。validate({ rule s : { TxtUsername : '必需'、TxtPassword : { required d : true，minlength: 8 })、Messages: {txtUserName: '请输入您的姓名'、TxtPassword : { required d d : '请输入您的密码'、minlength: '密码长度必须大于8'})、wrapper: 'li '，//提示符alertmsg ')//提示信息放入指定元素})；$('#btnReset ')。单击(函数(e){ e . preventdefault()；$('#txtUserName ')。val(“”)；$('#txtPassword ')。val(“”)；});});/script 5。不要输入用户名和密码，直接提交。显示界面如下：。

现在已经输入了用户名和密码，密码长度为4位。显示界面如下：。

好了，通过简单实现登录用户认证功能，大家应该对插件有了初步的了解。后面的章节将深入研究这个插件。