jquery.validate.js插件使用经验记录


Posted in Javascript onJuly 02, 2014

最近做项目,需要用到 jQuery.validate.js插件,于是记录一下工作中的一些经验,以便日后学习。

【例子如下】

1.前台页面

<form id="form1" method="post"> 
用户名:<input type="text" id="UserName" name="UserName" /><!--<span id="name_error"></span>--> 
<br /> 
密 码:<input type="password" id="Password" name="Password" /> 
<br /> 
<input type="submit" id="btnRegister" name="btnRegister" value="注册" /> 
<input type="button" id="btnCancel" name="btnCancel" value="取消" /> 
</form>

2.Javascript

<script type="text/javascript"> 
//添加自定义验证 
jQuery.validator.addMethod("checkPWD", function (value, element) { 
var flag = false; 
//flag = chkpwd($("#pwd")); //自定义验证密码逻辑 
return this.optional(element) || flag; 
}); 
$(function () { 
$("#form1").validate({ 
rules: { 
UserName: { 
required: true, 
//emote: function () { //验证用户名是否存在是否存在 方法一 
// $.ajax({ 
// type: 'POST', 
// url: "Handler/Handler1.ashx", 
// data: { name: $("#UserName").val() }, 
// async: false, 
// success: function (data) { 
// $("#name_error").html(data); 
// } 
// }); 
//} 
remote: { //验证用户名是否存在是否存在 方法二 
type: "POST", 
url: "Handler/Handler1.ashx", //后台处理程序 
dataType: "json", //接受数据格式 
data: { //要传递的参数 
action: function () { return "CheckName" }, 
name: function () { return $("#UserName").val(); }, 
param1: function () { return "自定义参数1"; } 
} 
} 
}, 
Password: { 
required: true, 
checkPWD: true //自定义验证,若想不用自定义验证,把 true 改成 false 即可。 
} 
}, 
messages: { 
"UserName": { 
required: "<span>用户名不能为空.</span>", 
remote: "<span>该会员名已存在!</span>" 
}, 
"Password": { 
required: "<span>密码不能为空.</span>", 
checkPWD: "<span>密码不符合自定义规则。。。</span>" 
} 
} 
}); 
}) 
</script>

3.后台处理程序

public void ProcessRequest(HttpContext context) 
{ 
context.Response.ContentType = "text/plain"; 
string action = context.Request["action"]; 
//获取用户名和自定义参数 
string name = context.Request["name"]; 
string param1 = context.Request["param1"]; 
if (!string.IsNullOrEmpty(name)) 
{ 
//模拟查询数据库,如果用户输入的是 admin ,则提示该账户已存在,返回 false 
if (name.Equals("admin")) 
{ 
context.Response.Write("false"); 
} 
else 
{ 
context.Response.Write("true"); 
} 
} 
}

4.运行结果

4.1 用户未输入数据时报错:
jquery.validate.js插件使用经验记录
4.2 用户输入错误信息时报错:
jquery.validate.js插件使用经验记录

Javascript 相关文章推荐
PHPExcel中的一些常用方法汇总
Jan 23 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
Apr 12 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
Feb 25 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
Jan 16 Javascript
Javascript循环删除数组中元素的几种方法示例
May 18 Javascript
详解在React里使用&quot;Vuex&quot;
Apr 02 Javascript
详解JavaScript中typeof与instanceof用法
Oct 24 Javascript
微信小程序全局变量的设置、使用、修改过程解析
Sep 24 Javascript
原生JS与JQ获取元素的区别详解
Feb 13 Javascript
详解webpack-dev-middleware 源码解读
Mar 23 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
Aug 13 Javascript
基于JavaScript实现年月日三级联动
Jun 22 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
Jul 02 #Javascript
js获取IP地址的方法小结
Jul 01 #Javascript
jQuery截取指定长度字符串的实现原理及代码
Jul 01 #Javascript
原生js事件的添加和删除的封装
Jul 01 #Javascript
jQuery的:parent选择器定义和用法
Jul 01 #Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
Jul 01 #Javascript
JavaScript利用正则表达式去除日期中的“-”
Jul 01 #Javascript
You might like
对Session和Cookie的区分与解释
2007/03/16 PHP
php 文本文件的读取效率
2012/02/10 PHP
使用php 获取时间今天明天昨天时间戳的详解
2013/06/20 PHP
php禁止直接从浏览器输入地址访问.php文件的方法
2014/11/04 PHP
Nginx下配置codeigniter框架方法
2015/04/07 PHP
基于JQuery制作的产品广告效果
2010/12/08 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
2011/12/08 Javascript
javascript框架设计读书笔记之种子模块
2014/12/02 Javascript
Backbone.js中的集合详解
2015/01/14 Javascript
快速学习jQuery插件 Cookie插件使用方法
2015/12/01 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
2016/05/03 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
2016/05/03 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
2016/07/01 Javascript
angular ngClick阻止冒泡使用默认行为的方法
2016/11/03 Javascript
bootstrap表格分页实例讲解
2016/12/30 Javascript
vue父子组件的数据传递示例
2017/03/07 Javascript
Vue关于数据绑定出错解决办法
2017/05/15 Javascript
浅谈ES6新增的数组方法和对象
2017/08/08 Javascript
webpack打包nodejs项目的方法
2018/09/26 NodeJs
JavaScript实现PC端四格密码输入框功能
2020/02/19 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
2020/05/08 Javascript
Node.JS如何实现JWT原理
2020/09/18 Javascript
详解vue修改elementUI的分页组件视图没更新问题
2020/11/13 Javascript
跟老齐学Python之关于类的初步认识
2014/10/11 Python
Python2.7实现多进程下开发多线程示例
2019/05/31 Python
tensorflow 2.1.0 安装与实战教程(CASIA FACE v5)
2020/06/30 Python
Python文件夹批处理操作代码实例
2020/07/21 Python
python Scrapy框架原理解析
2021/01/04 Python
综合办公室个人的自我评价
2013/12/22 职场文书
2015年元旦文艺汇演主持词
2014/03/26 职场文书
房屋继承公证书
2014/04/10 职场文书
2014七年级班主任工作总结
2014/12/05 职场文书
学生个人评语大全
2015/01/04 职场文书
2015年党风廉政承诺书
2015/01/22 职场文书
爱护环境卫生倡议书
2015/04/29 职场文书
Nginx配置并兼容HTTP实现代码解析
2021/03/31 Servers