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 ...
随机推荐
- Jenkins进阶系列之——08Jenkins纳入版本控制
2014-07-25:更新shell脚本 2014-06-05:更新shell脚本 2014-01-09:更新shell脚本,修改Jenkins文件删除后不能自动从版本控制删除的bug 是不是有过这种 ...
- 自编基于jQuery实现分页插件
$(function(){ }); /** * @params dataUrl:请求数据url地址 * @params countUrl:请求数据总数url地址 * @params pageSize: ...
- 在Ubuntu-14.04.3配置并成功编译Android6_r1源码
折腾了一周,终于把Android6_r1的源码编译成功.先上图,这是在ubuntu中运行的Android模拟器: 由于我是在win8中安装虚拟机VMware,然后在虚拟机中安装Ubuntu进行编译,所 ...
- [C/C++基础] C语言常用函数sprintf和snprintf的使用方法
Sprintf 函数声明:int sprintf(char *buffer, const char *format [, argument1, argument2, …]) 用途:将一段数据写入以地址 ...
- groot 引入外部模板
index7.html <html><head> <title>groots引入外部模板van</title> <script src=" ...
- jQuery ajax - get(),getJSON(),post()方法
1) jQuery ajax - get() 方法: $(selector).get(url,data,success(response,status,xhr),dataType) 参数 ...
- C++读取特定路径下文件目录及文件名称
这几天在弄一个项目,需要读取给定路径下的所有文件夹名称或所有带后缀的文件名. 查了下C++的资料,发现有很多方法,这里总结其中的一种,其他用法类似. 主要用到了以下几个头文件(类):io.h, fst ...
- [C#]Hosting Process (vshost.exe)
写在前面 最近在群里,有朋友问起这个vshost.exe进程到底是什么?当时确实不知道是个什么东东,给人的感觉是,经常看到它,就是在启动一个项目的时候,经常看到它,就是没细研究它是啥玩意儿.既然遇到了 ...
- [设计模式] javascript 之 建造者模式
建造者模式说明 1. 将一个复杂对象的 构造 与它的表示相分离,使同样的创建过程可有不同的表示,这就叫做建造者模式. 2. 面向对象语言中的说明,主要角色: 1>. Builder 这个接口类, ...
- Nodejs学习笔记（七）--- Node.js + Express 构建网站简单示例
目录 前言 新建项目.建立数据库以及其它准备工作 新建express + ejs 项目:sampleEjs 创建数据库 修改package.json文件,安装session和mysql模块 样式和JQ ...