Jquery validate插件使用方法详解
html:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Reg.aspx.cs" Inherits="Reg" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="css/Reg.css" rel="stylesheet" type="text/css" />
<link href="css/password_strength.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="jslib/jquery.js" type="text/javascript"></script>
<script src="js/Reg.js" type="text/javascript"></script>
<script src="jslib/jquery.validate.js" type="text/javascript"></script>
<script src="jslib/messages_cn.js" type="text/javascript"></script>
<script src="jslib/jquery.passwordStrength.js" type="text/javascript"></script>
</head>
<body>
<div id="formContain">
<form id="RegForm" name = "RegForm" method = "post" action = "RegHandler/RegUserHandler.ashx">
<fieldset>
<legend>用户注册</legend>
<table>
<tr>
<td> <label for="UserName">
用户名</label></td>
<td> <input type="text" name="username" id="txtUserName" maxlength = "30" /><span id="unIsRepeat"></span></td>
</tr>
<tr>
<td><label for="lbPwd">
密码</label></td>
<td> <p><input type="password" id="txtPwd" name = "pwd" /></p>
<p id="passwordStrengthP" class="is0"></p> </td>
</tr>
<tr>
<td><label for="lbConfirmPwd">
重复密码</label></td>
<td><input type="password" id="txtConfirmPwd" name = "pwd2" /></td>
</tr>
<tr>
<td><label for="Mobile">
手机</label></td>
<td> <input type="text" id="txtMobile" name = "mobile" maxlength="11" /></td>
</tr>
<tr>
<td><label for="QQ"> QQ</label></td>
<td><input type="text" id="txtQQ" name = "QQ" maxlength="15" /><span id="spQQ"></span></td>
</tr>
<tr>
<td><label for="Email">
电子邮箱</label></td>
<td><input type="text" name="email" id="txtEmail" value="" /><span id="EmailIsRepeat"></span></td>
</tr>
<tr>
<td><label for="Company">
公司名称</label></td>
<td><input type="text" id="txtCompany" style = " width:300px" name = "company" /><span id="companyIsRepeat"></span></td>
</tr>
<tr>
<td> <label for="Comabbr">
公司简称</label></td>
<td><input type="text" id="txtComabbr" name = "comabbr" size="30"/></td>
</tr>
<tr>
<td><label for="Address">
地址</label></td>
<td><input type="text" id="txtAddress" name = "address" style = " width:300px" /></td>
</tr>
<tr>
<td><label for="Contact">
联系人</label></td>
<td> <input type="text" id="txtContact" name = "contact"/><span id="spContact"></span></td>
</tr>
<tr>
<td><label for="TelPhone">
固定电话</label></td>
<td><input type="text" id="txtTelPhone" name = "telphone" /><span id="spTelNum"></span></td>
</tr>
<tr>
<td><label for="ValidateCode">
验证码</label></td>
<td><input type="text" id="txtValidateCode" name = "vcode" />
<img id="vc" src="vcode.aspx?x="Math.random()+"" title="图片看不清？点击重新得到验证码" /> <span style="font-size:12px;" id="refreshVC">刷新验证码</span></td>
</tr>
<tr>
<td>
<span id = "regInfo"></span>
</td>
<td><input type = "submit" id = "btnRegister" class = "btn" value = "注册"/>  
<input type = "button" id = "btnReset" class = "btn" value = "重置"/>
</td>
</tr>
</table>
</fieldset>
</form>
</div>
<div class="footer">
<table align="center">
<tbody>
<tr>
<td> </td>
</tr>
<tr style ="height:26px" >
<td align="center"></td>
</tr>
<tr style = "height:26px">
<td align="center"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Js文件:
var validator = $("#RegForm").validate({
rules: {
username: {//其中username为控件的name值
required: true,
minlength: 3,
remote: { //验证用户名是否存在
type: "POST",
url: "RegHandler/CheckRegUserHandler.ashx", //servlet
data: {
"un": function () { return $("#txtUserName").val(); },
"Flag": function () { return "0"; }
}
}
},
pwd: {
required: true,
minlength: 6
},
pwd2: {
required: true,
minlength: 6,
equalTo: "#txtPwd"
},
mobile: {
required: true,
isMobile: true
},
QQ: {
required: true,
isQQ: true
},
email: {
required: true,
email: true,
remote: { //验证用户名是否存在
type: "POST",
url: "RegHandler/CheckRegUserHandler.ashx", //servlet
data: {
"em": function () { return $("#txtEmail").val(); },
"Flag": function () { return "2"; } //---标志2为验证邮箱
}
}
},
telphone: { isTelPhone: true },
contact: { required: true, isContact: true },
vcode: {
required: true,
remote: { //验证验证码是否正确
type: "POST",
url: "RegHandler/CheckRegUserHandler.ashx", //servlet
data: {
"vc": function () { return $("#txtValidateCode").val(); },
"Flag": function () { return "3"; } //---标志3为验证验证码
}
}
}
},
messages: {
username: {
required: "用户名不能为空",
minlength: "用户名不能小于3位",
remote: "这个用户名太抢手了,建议您换一个"
},
pwd: {
required: "密码不能为空",
minlength: "密码长度必须大于6位"
},
pwd2: {
required: "确认密码不能为空",
minlength: "密码长度必须大于6位",
equalTo: "俩次输入密码不一致"
},
mobile: {
required: "手机号不能为空",
isMobile: "请输入正确的手机号"
},
QQ: { required: "QQ不能为空", isQQ: "qq号码格式不对" },
email: {
required: "电子邮箱不能为空",
email: "电子邮件格式不正确",
remote: "该邮箱已经被注册"
},
telphone: { isTelPhone: "电话格式不对" },
contact: { required: "联系人不能为空", isContact: "联系人姓名必须为2-4个汉字" },
vcode: {
required: "验证码不能为空",
remote: "验证码输入不正确"
}
},
success: function (label) {
// set as text for IE
label.html(" ").addClass("checked");
}
})
Jquery validate插件使用方法详解的更多相关文章
- jQuery插件制作方法详解
jQuery插件制作方法详解 jquery插件给我的感觉清一色的清洁,简单.如Jtip,要使用它的功能,只需要在你的元素的class上加 上Jtip,并引入jtip.js及其样式即可以了. ...
- jquery.validate.js 验证框架详解
项目中遇到这个js框架 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...
- jquery中的ajax方法详解
定义和用法ajax() 方法通过 HTTP 请求加载远程数据.该方法是 jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XML ...
- jquery.dataTables插件使用例子详解
DataTables是一个jQuery的表格插件.这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格 效果图 代码 <!doctype html> & ...
- BootStrapt iCheck表单美化插件使用方法详解（含参数、事件等） 全选 反选
特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 — 包括 桌面和移动设备 2.支持触摸设备 — iOS.Android.BlackBerry.Windows Phone等系统 4.方便 ...
- iCheck表单美化插件使用方法详解（含参数、事件等）
iCheck 特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 - 包括 桌面和移动设备 2.支持触摸设备 - iOS.Android.BlackBerry.Windows Phon ...
- [转]iCheck表单美化插件使用方法详解（含参数、事件等）
本文转自:http://www.exp99.com/jswz/f2e/1408696007_34.html iCheck 特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 — 包括 ...
- jQuery Fancybox插件使用参数详解
Fancybox的特点如下: 可以支持图片.html文本.flash动画.iframe以及ajax的支持 可以自定义播放器的CSS样式 可以以组的形式进行播放 如果将鼠标滚动插件(mouse whee ...
- jQuery JCrop插件的使用详解
jQuery的一个图片剪切的一个插件, 使用插件必须条件:引入jQuery.js文件,引入jQuery.Jcrop.js文件,引入JQuery.Jcrop.css文件 1.最基本的使用方法: &l ...
随机推荐
- 20135335郝爽 & 20135304刘世鹏 实验一
北京电子科技学院(BESTI) 实 验 报 告 课程: 密码系统设计基础 ...
- 如何构建JSON数据,JSON数据的格式,JSON数据的获取
假设你是用$.getJSON();方法获取JSON数据$.getJSON(url,{"Action":"getStudent"},function(data){ ...
- 如何优雅的写一篇安利文-以Sugar ORM为例
前言 我最近喜欢把写的十分优美的技术文章叫做安利文.首先,文章必须是原创而非软广:其次,阅读之后不仅能快速吸纳技术要点并入门开发,还能感同身受的体会作者热情洋溢的赞美和急于分享心得体验的心情,让人感觉 ...
- js监听键盘回车
//监听回车 $(document).keydown(function(e) { ) { $("#btnLogin").click(); } }) //input绑定回车 $('# ...
- Linq之Expression进阶
目录 写在前面 系列文章 表达式树解析 表达式树特性 编译表达树 总结 写在前面 让我们首先简单回顾一下上篇文章介绍的内容,上篇文章介绍了表达式树的基本概念(表达式树又称为“表达式目录树”,以数据形式 ...
- tomcat虚拟路径的几种配置方法
一般我们都是直接引用webapps下面的web项目,如果我们要部署一个在其它地方的WEB项目,这就要在TOMCAT中设置虚拟路径了,Tomcat的加载web顺序是先加载 $Tomcat_home$\c ...
- 视频播放实时记录日志并生成XML文件
需求描述: 在JWPlayer视频播放过程中,要求实时记录视频观看者播放.暂停的时间,并记录从暂停到下一次播放时所经过的时间.将所有记录保存为XML文件,以方便数据库的后续使用. 实现过程: 尝试1: ...
- SQLHelper---赵晓虎（简洁，全面）
public static class SQLHelper { //获取连接字符串,,首先添加对configuration的引用 private static string connStr = Con ...
- Tomcat tomcat-users.xml详解
conf/tomcat-users.xml <?xml version='1.0' encoding='utf-8'?> <tomcat-users> <role rol ...
- Java中的继承、封装、多态、抽象
1.继承 java 和某些面向对象语言(如 c++)在实现继承的不同之处在于java只支持单继承,不支持多重继承.即java 中一个类只能继承于另一个类.我们将被继承的类称之为父类(基类),继承类称之 ...