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 ...
随机推荐
- Fedora 12 环境搭建
又来折腾发行版了. 这一回是Fedora12,搞的挺艰难的 下载了Fedora-12-i386-DVD.iso,无论使用ultraiso还是dd都无法安装. 后来下载了一个ImageWriter.ex ...
- error C2065: “IDD_DIALOG1” : 未声明的标识符
编译时提示error C2065: “IDD_DIALOG1” : 未声明的标识符 错误的可能原因及解决方法如下: 1.出错文件中没有包含资源文件ID声明的resource.h文件.在出错文件中加入# ...
- 学习笔记——Maven settings.xml 配置详解
文件存放位置 全局配置: ${M2_HOME}/conf/settings.xml 用户配置: ${user.home}/.m2/settings.xml note:用户配置优先于全局配置.${use ...
- 由外边距合并到BFC
置顶文章:<纯CSS打造银色MacBook Air(完整版)> 上一篇:<JavaScript实现Ajax小结> 作者主页:myvin 博主QQ:851399101(点击QQ和 ...
- 嵌入式Linux驱动开发之helloword心得
自从选择了物联网这个专业,智能XX的字样牵动着每一个学习这个专业的孩子. 大家兴致勃勃的来到了学校,结果一切想象和自己的设想并不一样.想象中的各种智能般梦幻的场景变成了真实的高数/电路/模电等等诸如此 ...
- node 通用的中间件
为什么学习Node,因为他的门槛比较高一点,现在比较热门一点. 技术这种东西,用最短的时间学会了收益终身. 1.常用的中间件: // 通用的中间件 //bodyParser connect 内建的中间 ...
- AngularJS开发指南3：Angular主要组成部分以及如何协同工作
AngularJS的主要组成部分是: 启动(startup) - 展示“hello world!” 执行期(runtime) - AngularJS 执行期概览 作用域(scope) - 视图和控制器 ...
- ThreadLocal模式的核心元素
首先来看ThreadLocal模式的实现机理:在JDK的早期版本中,提供了一种解决多线程并发问题的方案:java.lang.ThreadLocal类.ThreadLocal类在维护变量时,世纪使用了当 ...
- “耐撕”团队 2016.04.06 站立会议
1. 时间:20:00--20:20 共计20分钟. 2. 成员: Z 郑蕊 * 组长 (博客:http://www.cnblogs.com/zhengrui0452/), P 濮成林(博客:http ...
- Linux大文件已删除，但df查看已使用的空间并未减少解决
在我的生活当中遇到磁盘快满了,这时候准备去删除一些大文件 于是我使用ncdu 查看了一下当前系统占用资源比较多的是那些文件,结果一看是elasticsearch的日志文件,好吧,竟然找到源头了,那就把 ...