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 相关文章推荐
jquery 无限级下拉菜单的简单实现代码
Feb 21 Javascript
JavaScript中对象属性的添加和删除示例
May 12 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
May 20 Javascript
jQuery根据表单name获取值的方法
May 24 Javascript
jquery自适应布局的简单实例
May 28 Javascript
jquery实现(textarea)placeholder自动换行
Dec 22 Javascript
Vue.js实现模拟微信朋友圈开发demo
Apr 20 Javascript
Vue中render函数的使用方法
Jan 31 Javascript
Vue 动态组件与 v-once 指令的实现
Feb 12 Javascript
3分钟了解vue数据劫持的原理实现
May 01 Javascript
如何解决日期函数new Date()浏览器兼容性问题
Sep 11 Javascript
微信小程序 wxParse插件显示视频问题
Sep 27 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
为PHP初学者的8点有效建议
2010/11/20 PHP
在PHP中使用X-SendFile头让文件下载更快
2014/06/01 PHP
PHP开发实现微信退款功能示例
2017/11/25 PHP
php使用curl伪造来源ip和refer的方法示例
2018/05/08 PHP
js技巧--转义符&quot;\&quot;的妙用
2007/01/09 Javascript
JQuery 选择器、过滤器介绍
2011/02/14 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
2011/09/28 Javascript
浅谈javascript的原型继承
2012/07/25 Javascript
Javascript图像处理思路及实现代码
2012/12/25 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
2016/07/01 Javascript
jquery日历插件e-calendar升级版
2016/11/10 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
2017/04/07 Javascript
详解webpack打包nodejs项目(前端代码)
2018/09/19 NodeJs
angularJs提交文本框数据到后台的方法
2018/10/08 Javascript
微信公众平台 发送模板消息(Java接口开发)
2019/04/17 Javascript
Python re模块介绍
2014/11/30 Python
Python中利用Scipy包的SIFT方法进行图片识别的实例教程
2016/06/03 Python
python 判断参数为Nonetype类型或空的实例
2018/10/30 Python
对python PLT中的image和skimage处理图片方法详解
2019/01/10 Python
搞定这套Python爬虫面试题(面试会so easy)
2019/04/03 Python
应用OpenCV和Python进行SIFT算法的实现详解
2019/08/21 Python
英国著名的药妆网站:Escentual
2016/07/29 全球购物
Ootori在线按摩椅店:一家专业的按摩椅制造商
2019/04/10 全球购物
俄罗斯珠宝市场的领导者之一:Бронницкий ювелир
2019/10/02 全球购物
公司培训心得体会
2014/01/03 职场文书
大学毕业生通用自我评价
2014/01/05 职场文书
升国旗仪式主持词
2014/03/19 职场文书
代理人委托书
2014/09/16 职场文书
12.4全国法制宣传日活动方案
2014/11/02 职场文书
整改落实自查报告
2014/11/05 职场文书
赞助商致辞
2015/07/30 职场文书
教师节随笔
2015/08/15 职场文书
导游词之云南省玉龙雪山
2019/12/19 职场文书
python函数指定默认值的实例讲解
2021/03/29 Python
JavaScript 中for/of,for/in 的详细介绍
2021/11/17 Javascript
zabbix 代理服务器的部署与 zabbix-snmp 监控问题
2022/07/15 Servers