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 相关文章推荐
使两个iframe的高度与内容自适应,且相等
Nov 20 Javascript
jQuery使用手册之二 DOM操作
Mar 24 Javascript
javascript XML数据显示为HTML一例
Dec 23 Javascript
FileUpload 控件 禁止手动输入或粘贴的实现代码
Apr 07 Javascript
Javascript 面向对象 继承
May 13 Javascript
jQuery Tips 为AJAX回调函数传递额外参数的方法
Dec 28 Javascript
从盛大通行证上摘下来的身份证验证js代码
Jan 11 Javascript
jQuery的观察者模式详解
Dec 22 Javascript
简介alert()与console.log()的不同
Aug 26 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
Sep 16 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
Jun 16 Javascript
Vue使用鼠标在Canvas上绘制矩形
Dec 24 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
PHP5 面向对象程序设计
2008/02/13 PHP
PHP中几种常见的超时处理全面总结
2012/09/11 PHP
PHP可逆加密/解密函数分享
2012/09/25 PHP
IIS+fastcgi下PHP运行超时问题的解决办法详解
2013/06/20 PHP
解析Extjs与php数据交互(增删查改)
2013/06/25 PHP
php使用NumberFormatter格式化货币的方法
2015/03/21 PHP
PHP实现文件上传和多文件上传
2015/12/24 PHP
PHP登录(ajax提交数据和后台校验)实例分享
2016/12/29 PHP
利用php生成验证码
2017/02/23 PHP
Javascript里使用Dom操作Xml
2006/09/20 Javascript
DWZ table的原生分页浅谈
2013/03/01 Javascript
浅谈Nodejs观察者模式
2015/10/13 NodeJs
基于jQuery实现select下拉选择可输入附源码下载
2016/02/03 Javascript
javascript实现的猜数小游戏完整实例代码
2016/05/10 Javascript
JSP基于Bootstrap分页显示实例解析
2016/06/12 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
2016/08/30 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
2017/01/21 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
2017/05/13 jQuery
解决angularjs service中依赖注入$scope报错的问题
2018/10/02 Javascript
p5.js绘制创意自画像
2019/11/04 Javascript
使用Python的Flask框架来搭建第一个Web应用程序
2016/06/04 Python
Python线性方程组求解运算示例
2018/01/17 Python
python 一篇文章搞懂装饰器所有用法(建议收藏)
2019/08/23 Python
在Django下创建项目以及设置settings.py教程
2019/12/03 Python
Python如何发送与接收大型数组
2020/08/07 Python
优秀教师先进事迹
2014/01/22 职场文书
社会实践感言
2014/01/25 职场文书
KTV的创业计划书范文
2014/02/02 职场文书
幼儿园教师教育感言
2014/02/28 职场文书
银行求职信范文
2014/05/26 职场文书
领导干部个人整改措施落实情况汇报
2014/10/29 职场文书
2015大学生自我评价范文
2015/03/03 职场文书
Python3 多线程(连接池)操作MySQL插入数据
2021/06/09 Python
SQL实现LeetCode(176.第二高薪水)
2021/08/04 MySQL
SQL Server一个字符串拆分多行显示或者多行数据合并成一个字符串
2022/05/25 SQL Server