ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能


Posted in Javascript onFebruary 03, 2012

页面样式代码:

<style type="text/css"> 
.header 
{ 
background-color: #CCCCCC; 
color: White; 
font-size: x-large; 
} 
.content 
{ 
background-color: White; 
font-weight: lighter; 
font-size: small; 
} 
.content td 
{ 
text-align: left; 
} 
.mandatory 
{ 
color: Red; 
} 
.errorContainer 
{ 
display: none; 
margin-bottom: 20px; 
} 
.alertMsg 
{ 
margin-left: 20px; 
color: #660000; 
} 
.input-highlight 
{ 
background-color: #CCCCCC; 
} 
</style>

页面结构代码:
<form id="form1" runat="server"> 
<div align="center"> 
<div align="center" class="errorContainer"> 
<fieldset style="width: 550px;"> 
<p align="left" class="alertMsg"> 
这里有一些错误注册提示信息,根据提示请核实您注册信息格式是否正确: 
</p> 
</fieldset> 
</div> 
<fieldset style="width: 350px; height: 400px"> 
<table cellpadding="3" cellspacing="3" border="0" class="content"> 
<tr> 
<td colspan="2" class="header" style="text-align: center;"> 
注册用户 
</td> 
</tr> 
<tr> 
<td> 
用户名<span class="mandatory">*</span> 
</td> 
<td> 
<asp:TextBox ID="txtName" runat="server"></asp:TextBox> 
</td> 
</tr> 
<tr> 
<td> 
Email<span class="mandatory">*</span> 
</td> 
<td> 
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox> 
</td> 
</tr> 
<tr> 
<td> 
密码<span class="mandatory">*</span> 
</td> 
<td> 
<asp:TextBox ID="txtPassword" runat="server" TextMode="Password"></asp:TextBox> 
</td> 
</tr> 
<tr> 
<td> 
确认密码<span class="mandatory">*</span> 
</td> 
<td> 
<asp:TextBox ID="txtConfirmPwd" runat="server" TextMode="Password"></asp:TextBox> 
</td> 
</tr> 
<tr> 
<td> 
生日<span class="mandatory">*</span> 
</td> 
<td> 
<asp:TextBox ID="txtDOB" runat="server"></asp:TextBox> 
</td> 
</tr> 
<tr> 
<td> 
地址1<span class="mandatory">*</span> 
</td> 
<td> 
<asp:TextBox ID="txtAddress1" runat="server"></asp:TextBox> 
</td> 
</tr> 
<tr> 
<td> 
地址2 
</td> 
<td> 
<asp:TextBox ID="txtAddress2" runat="server"></asp:TextBox> 
</td> 
</tr> 
<tr> 
<td> 
邮政编号<span class="mandatory">*</span> 
</td> 
<td> 
<asp:TextBox ID="txtPostal" runat="server"></asp:TextBox> 
</td> 
</tr> 
<tr> 
<td> 
网站 
</td> 
<td> 
<asp:TextBox ID="txtWebsite" runat="server"></asp:TextBox> 
</td> 
</tr> 
<tr> 
<td colspan="2"> 
<asp:CheckBox ID="chkTandC" runat="server" />我接受相关法律条款 
</td> 
</tr> 
<tr> 
<td colspan="2" style="text-align: center;"> 
<asp:Button ID="btnSubmit" Text="提交" runat="server" /> <asp:Button ID="btnReset" 
Text="重置" runat="server" /> 
</td> 
</tr> 
</table> 
</fieldset> 
</div> 
</form>

脚本代码:

先引入脚本文件:

<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> 
<script src="Scripts/jquery.validate.js" type="text/javascript"></script> 
<script src="Scripts/jquery.form.js" type="text/javascript"></script>

脚本功能代码:
<script type="text/javascript"> 
$(document).ready(function () { 
// 在这里设置默认的操作行为 
$.validator.setDefaults({ 
highlight: function (input) { 
$(input).addClass("input-highlight"); 
}, 
unhighlight: function (input) { 
$(input).removeClass("input-highlight"); 
} 
}); // 然后调用函数validate()开始对form校验 
$("#form1").validate({ 
rules: { txtName: "required", 
// 验证邮件格式是否正确,设置email属性为true 
txtEmail: { required: true, email: true }, 
txtPassword: { required: true, minlength: 8 }, 
// 在这里equalTo属性的作用是验证确认密码必须和之前输入的密码相等 
txtConfirmPwd: { required: true, minlength: 8, equalTo: "#txtPassword" }, 
// 验证日期格式是否正确,设置date属性为true; 
txtDOB: { required: true, date: true }, 
// 通过属性maxlength设置文本最大长度 
txtAddress1: { required: true, maxlength: 200 }, 
txtAddress2: { maxlength: 200 }, 
// digits属性设置输入的内容必须为数字 
txtPostal: { required: true, digits: true }, 
// url属性验证是否输入为合法的网址 
txtWebsite: { url: true }, 
chkTandC: "required" 
}, 
messages: { txtName: "请输入您的姓名", 
txtEmail: { required: "请输入您的Email", 
email: "请输入一个合法的email地址" 
}, 
txtPassword: { required: "请输入您的密码", 
minlength: "密码长度必须大于8" 
}, 
txtConfirmPwd: { required: "请输入您的确认密码", 
minlength: "确认的密码长度必须大于8", 
equalTo: "请保证输入的密码和确认的密码要一样" 
}, 
txtDOB: { required: "请输入您的生日", 
date: "您输入的生日日期格式不对" 
}, 
txtAddress1: { required: "请输入您的地址1", 
maxlength: "您输入的地址1长度不能超过200" 
}, 
txtAddress2: { maxlength: "您输入的地址1长度不能超过200" }, 
txtPostal: { required: "请输入您的邮政编号", 
digits: "您输入的邮政编号必须都为数字" 
}, 
txtWebsite: { url: "请输入一个合法的网址" }, 
chkTandC: { required: "请接受相关法律条款" } 
}, 
wrapper: "li", 
errorContainer: $("div.errorContainer"), 
errorLabelContainer: $("#form1 p.alertMsg") 
}); 
$("#btnReset").click(function (e) { 
e.preventDefault(); 
// 这里使用了插件form的resetForm()函数,恢复到第一次加载页面的状态 
$("#form1").resetForm(); 
}); 
}); 
</script>

注意:样式选择器div.errorContainer和div .errorContainer的含义不一样,第一个是选择所有带样式类errorContainer的div元素,而第二个是选择div元素里面的后代所有带样式类errorContainer的元素。
最终效果图:

ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能

Javascript 相关文章推荐
表单的一些基本用法与技巧
Jul 15 Javascript
用jquery ajax获取网站Alexa排名的代码
Dec 12 Javascript
javascript 45种缓动效果 非常酷
Jun 28 Javascript
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
Jul 26 Javascript
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
Sep 28 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
Jan 27 Javascript
基于Javascript实现倒计时功能
Feb 22 Javascript
Vue2学习笔记之请求数据交互vue-resource
Feb 23 Javascript
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
如何对react hooks进行单元测试的方法
Aug 14 Javascript
Node.js API详解之 module模块用法实例分析
May 13 Javascript
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
Feb 03 #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
You might like
PHP邮件群发机实现代码
2016/02/16 PHP
PHP互换两个变量值的方法(不用第三变量)
2016/11/14 PHP
PHP PDOStatement::fetchObject讲解
2019/02/01 PHP
初窥JQuery(二)事件机制(2)
2010/12/06 Javascript
JSON+HTML实现国家省市联动选择效果
2014/05/18 Javascript
javascript匿名函数实例分析
2014/11/18 Javascript
JS逆序遍历实现代码
2014/12/02 Javascript
JavaScript中两个字符串的匹配
2016/06/08 Javascript
AngularJS使用ng-repeat指令实现下拉框
2016/08/23 Javascript
值得分享的bootstrap table实例
2016/09/22 Javascript
微信小程序 Record API详解及实例代码
2016/09/30 Javascript
JS实现页面打印功能
2017/03/16 Javascript
vue.js单页面应用实例的简单实现
2017/04/10 Javascript
全面解析Node.js 8 重要功能和修复
2017/06/02 Javascript
JS获取子、父、兄节点方法小结
2017/08/14 Javascript
移动web开发之touch事件实例详解
2018/01/17 Javascript
[05:16]《大圣!大圣》——DOTA2新英雄齐天大圣配音李世宏老师专访
2016/12/13 DOTA
python登陆asp网站页面的实现代码
2015/01/14 Python
对python中数据集划分函数StratifiedShuffleSplit的使用详解
2018/12/11 Python
在python 中实现运行多条shell命令
2019/01/07 Python
python实现鸢尾花三种聚类算法(K-means,AGNES,DBScan)
2019/06/27 Python
Python学习笔记之Break和Continue用法分析
2019/08/14 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
python中p-value的实现方式
2019/12/16 Python
Pycharm 2020最新永久激活码(附最新激活码和插件)
2020/09/17 Python
python redis存入字典序列化存储教程
2020/07/16 Python
python实现取余操作的简单实例
2020/08/16 Python
CSS3 flex布局之快速实现BorderLayout布局
2015/12/03 HTML / CSS
印度婴儿用品在线商店:Firstcry.com
2016/12/05 全球购物
德国W家官网,可直邮中国的母婴商城:Windeln.de
2021/03/03 全球购物
PHP如何去执行一个SQL语句
2016/03/05 面试题
什么是Deployment descriptors;都有什么类型的部署描述符
2015/07/28 面试题
市政管理求职信范文
2014/05/07 职场文书
入股协议书范本
2014/11/01 职场文书
2015年安全工作总结范文
2015/04/02 职场文书
2015年度物流工作总结
2015/04/30 职场文书