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 ...
随机推荐
- 信息安全系统设计基础实验四：外设驱动程序设计 20135211李行之&20135216刘蔚然
北京电子科技学院(BESTI) 实 验 报 告 封面 课程:信息安全系统设计基础 班级:1352 ...
- HBase入库调优
本文章只针对“微型集群处理大数据”的场景. 场景描述: 硬件:5个节点,每个节点可用硬盘1块(700G.500G等).8核cpu,实验室环境(有时候还要跑其他程序跟你抢占资源),16G内存. 软件:h ...
- EF实体框架之CodeFirst四
在EF实体框架之CodeFirst二中也提到数据库里面一般包括表.列.约束.主外键.级联操作.实体关系(E-R图).存储过程.视图.锁.事务.数据库结构更新等.前面几篇博客把表.存储过程.视图这些算是 ...
- Java实现文件的加密与解密
最近在做一个项目,需要将资源文件(包括图片.动画等类型)进行简单的加密后再上传至云上的服务器,而在应用程序中对该资源使用前先将读取到的文件数据进行解密以得到真正的文件信息.此策略的原因与好处是将准备好 ...
- 【BZOJ1006】【HNOI2008】神奇的国度（弦图染色）
1006: [HNOI2008]神奇的国度 Time Limit: 20 Sec Memory Limit: 162 MBSubmit: 1467 Solved: 603[Submit][Stat ...
- “耐撕”团队 2016.04.05 站立会议
1. 时间: 20:10--20:25 共计15分钟. 2. 成员: Z 郑蕊 * 组长 (博客:http://www.cnblogs.com/zhengrui0452/), P 濮成林(博客:ht ...
- Error: java.lang.UnsatisfiedLinkError: no ntvinv in java.library.path
Error Message When compiling or executing a Java application that uses the ArcObjects Java API, the ...
- myeclipse自动import
不管包什么的 直接把代码全写出来 再按 ctrl + shift +o 这是自动导包的 前提是你写的代码是正确的
- [转]Java中继承、多态、重载和重写介绍
什么是多态?它的实现机制是什么呢?重载和重写的区别在那里?这就是这一次我们要回顾的四个十分重要的概念:继承.多态.重载和重写. 继承(inheritance) 简单的说,继承就是在一个现有类型的基础上 ...
- Maven 教程
Maven 教程 序:几次对Maven 的学习,都因为各种原因 而中途切断了,再一次学习的时候,又不得不重新开始,结果发现 又不记得步骤 又找不到对应的文档.别人写的再好,终究比不过自己亲手实践的得出 ...