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 ...
随机推荐
- Linux 第一次学习笔记
一.Linux 为何物 Linux 就是一个操作系统,就像你多少已经了解的 Windows(xp,7,8)和 Max OS ,至于操作系统是什么,就不用过多解释了,如果你学习过前面的入门课程,应该会有 ...
- C#基础之内存分配
1.创建一个对象 一个对象的创建过程主要分为内存分配和初始化两个环节.在.NET中CLR管理的内存区域主要有三部分:栈.GC堆.LOH堆,栈主要用来分配值类型数据.它的管理是有系统控制的,而不是像GC ...
- Linux下线程池的理解与简单实现
首先,线程池是什么?顾名思义,就是把一堆开辟好的线程放在一个池子里统一管理,就是一个线程池. 其次,为什么要用线程池,难道来一个请求给它申请一个线程,请求处理完了释放线程不行么?也行,但是如果创建线程 ...
- 怎样写 OpenStack Neutron 的 Extension （四）
上文说到需要在 /neutronclient/v2_0/myextension/extension.py 中分别定义五个 class:List/Show/Create/Delete/UpdateExt ...
- SQL Server 收缩日志
一. SQL Server 2008 收缩日志 (1) 使用SQL管理器收缩日志 第一步执行如下命令 ALTER DATABASE platform SET RECOVERY SIMPLE GO 第二 ...
- DateTime.Parse
上月第一天:DateTime.Parse(DateTime.Now.AddMonths(-1).ToString("yyyy-MM-01")) 上周星期天:DateTime.Par ...
- Ztree异步加载自动展开节点
在Ztree的官网Demo中,有自动展开的例子,是通过设置节点属性open:true来实现自动展开的,但是在异步加载中,这个属性设置为true也不会自动展开,因为open:true是指在有子节点的情况 ...
- [wikioi2069]油画（贪心）
题目:http://www.wikioi.com/problem/2069/ 分析: 首先这个问题比较复杂,涉及到两个重要的考虑点,一个是当前拿来的颜色是否保留,一个是若保留后那么应该把当前盘子的哪个 ...
- Objective-C 高性能的循环遍历 forin - NSEnumerator - 枚举 优化
Cocoa编程的一个通常的任务是要去循环遍历一个对象的集合 (例如,一个 NSArray, NSSet 或者是 NSDictionary). 这个看似简单的问题有广泛数量的解决方案,它们中的许多不乏 ...
- nginx 负载均衡服务器的双机搞可用
摘自书籍:<实战Nginx取代Apache高性能Web服务器>一书 P94 两种方式实现 一种方式是公司里的一台web服务器作为主服务器,另一台服务器作为热备服务器 主服务器绑定一个虚拟I ...