页面样式代码: 复制代码 代码如下: <BR>.header <BR>{ <BR>background-color: #CCCCCC; <BR>color: White; <BR>font-size: x-large; <BR>} <BR>.content <BR>{ <BR>background-color: White; <BR>font-weight: lighter; <BR>font-size: small; <BR>} <BR>.content td <BR>{ <BR>text-align: left; <BR>} <BR>.mandatory <BR>{ <BR>color: Red; <BR>} <BR>.errorContainer <BR>{ <BR>display: none; <BR>margin-bottom: 20px; <BR>} <BR>.alertMsg <BR>{ <BR>margin-left: 20px; <BR>color: #660000; <BR>} <BR>.input-highlight <BR>{ <BR>background-color: #CCCCCC; <BR>} <BR> 页面结构代码: 复制代码 代码如下: 这里有一些错误注册提示信息,根据提示请核实您注册信息格式是否正确: 注册用户 用户名* Email* 密码* 确认密码* 生日* 地址1* 地址2 邮政编号* 网站 我接受相关法律条款 Text="重置" runat="server" /> 脚本代码: 先引入脚本文件: 复制代码 代码如下: 脚本功能代码: 复制代码 代码如下: <BR>$(document).ready(function () { <BR>// 在这里设置默认的操作行为 <BR>$.validator.setDefaults({ <BR>highlight: function (input) { <BR>$(input).addClass("input-highlight"); <BR>}, <BR>unhighlight: function (input) { <BR>$(input).removeClass("input-highlight"); <BR>} <BR>}); <br><br>// 然后调用函数validate()开始对form校验 <BR>$("#form1").validate({ <BR>rules: { txtName: "required", <BR>// 验证邮件格式是否正确,设置email属性为true <BR>txtEmail: { required: true, email: true }, <BR>txtPassword: { required: true, minlength: 8 }, <BR>// 在这里equalTo属性的作用是验证确认密码必须和之前输入的密码相等 <BR>txtConfirmPwd: { required: true, minlength: 8, equalTo: "#txtPassword" }, <BR>// 验证日期格式是否正确,设置date属性为true; <BR>txtDOB: { required: true, date: true }, <BR>// 通过属性maxlength设置文本最大长度 <BR>txtAddress1: { required: true, maxlength: 200 }, <BR>txtAddress2: { maxlength: 200 }, <BR>// digits属性设置输入的内容必须为数字 <BR>txtPostal: { required: true, digits: true }, <BR>// url属性验证是否输入为合法的网址 <BR>txtWebsite: { url: true }, <BR>chkTandC: "required" <BR>}, <BR>messages: { txtName: "请输入您的姓名", <BR>txtEmail: { required: "请输入您的Email", <BR>email: "请输入一个合法的email地址" <BR>}, <BR>txtPassword: { required: "请输入您的密码", <BR>minlength: "密码长度必须大于8" <BR>}, <BR>txtConfirmPwd: { required: "请输入您的确认密码", <BR>minlength: "确认的密码长度必须大于8", <BR>equalTo: "请保证输入的密码和确认的密码要一样" <BR>}, <BR>txtDOB: { required: "请输入您的生日", <BR>date: "您输入的生日日期格式不对" <BR>}, <BR>txtAddress1: { required: "请输入您的地址1", <BR>maxlength: "您输入的地址1长度不能超过200" <BR>}, <BR>txtAddress2: { maxlength: "您输入的地址1长度不能超过200" }, <BR>txtPostal: { required: "请输入您的邮政编号", <BR>digits: "您输入的邮政编号必须都为数字" <BR>}, <BR>txtWebsite: { url: "请输入一个合法的网址" }, <BR>chkTandC: { required: "请接受相关法律条款" } <BR>}, <BR>wrapper: "li", <BR>errorContainer: $("div.errorContainer"), <BR>errorLabelContainer: $("#form1 p.alertMsg") <BR>}); <br><br>$("#btnReset").click(function (e) { <BR>e.preventDefault(); <BR>// 这里使用了插件form的resetForm()函数,恢复到第一次加载页面的状态 <BR>$("#form1").resetForm(); <BR>}); <BR>}); <BR> 注意:样式选择器div.errorContainer和div .errorContainer的含义不一样,第一个是选择所有带样式类errorContainer的div元素,而第二个是选择div元素里面的后代所有带样式类errorContainer的元素。 最终效果图: