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 相关文章推荐
Javascript之文件操作
Mar 07 Javascript
jQuery Div中加载其他页面的实现代码
Feb 27 Javascript
javascript preload&amp;lazy load
May 13 Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
Jul 03 Javascript
JS实现div内部的文字或图片自动循环滚动代码
Apr 19 Javascript
javascript与Python快速排序实例对比
Aug 10 Javascript
jQuery满屏焦点图左右滚动特效代码分享
Sep 07 Javascript
深入分析jsonp协议原理
Sep 26 Javascript
jQuery防止重复绑定事件的解决方法
May 14 Javascript
vue修改vue项目运行端口号的方法
Aug 04 Javascript
Angularjs 1.3 中的$parse实例代码
Sep 14 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
May 11 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中的命名空间详细介绍
2015/07/02 PHP
Yii实现简单分页的方法
2016/04/29 PHP
PHP微信公众号开发之微信红包实现方法分析
2017/07/14 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
javascript 获取元素位置的快速方法 getBoundingClientRect()
2009/11/26 Javascript
javascript showModalDialog,open取得父窗口的方法
2010/03/10 Javascript
让低版本浏览器支持input的placeholder属性(js方法)
2013/04/03 Javascript
jQuery中:input选择器用法实例
2015/01/03 Javascript
Bootstrap模态对话框的简单使用
2016/04/29 Javascript
浅谈JS之iframe中的窗口
2016/09/13 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
2016/10/12 Javascript
微信小程序 删除项目工程实现步骤
2016/11/10 Javascript
bootstrap配合Masonry插件实现瀑布式布局
2017/01/18 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
2017/03/04 Javascript
JavaScript实现精美个性导航栏筋斗云效果
2017/10/29 Javascript
vue 注册组件的使用详解
2018/05/05 Javascript
从0到1搭建Element的后台框架的方法步骤
2019/04/10 Javascript
ant design vue 表格table 默认勾选几项的操作
2020/10/31 Javascript
[01:03:38]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS CIS
2014/05/22 DOTA
复制粘贴功能的Python程序
2008/04/04 Python
简单讲解Python中的字符串与字符串的输入输出
2016/03/13 Python
Python解析excel文件存入sqlite数据库的方法
2016/11/15 Python
Python里字典的基本用法(包括嵌套字典)
2019/02/27 Python
python3中rank函数的用法
2019/11/27 Python
在Python中通过threshold创建mask方式
2020/02/19 Python
马来西亚网上购物:Youbeli
2018/03/30 全球购物
英国最受欢迎的在线隐形眼镜商店:VisionDirect.co.uk
2018/12/06 全球购物
教师师德教育的自我评价
2013/10/31 职场文书
互联网电子商务专业毕业生求职信
2014/03/18 职场文书
优秀驾驶员先进事迹材料
2014/05/04 职场文书
2014年协会工作总结
2014/11/22 职场文书
2014年妇幼保健工作总结
2014/12/08 职场文书
python中pandas.read_csv()函数的深入讲解
2021/03/29 Python
pytorch实现线性回归以及多元回归
2021/04/11 Python
Oracle 触发器trigger使用案例
2022/02/24 Oracle