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控制Radio选中方法分析
May 29 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
Jun 14 Javascript
获取jqGrid中选择的行的数据
Nov 30 Javascript
浅析jQuery操作select控件的取值和设值
Dec 07 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
Dec 20 Javascript
jQuery Validate 校验多个相同name的方法
May 18 jQuery
vue引入swiper插件的使用实例
Jul 19 Javascript
zTree节点文字过多的处理方法
Nov 24 Javascript
Vue2.0用户权限控制解决方案的示例
Feb 10 Javascript
iview table render集成switch开关的实例
Mar 14 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
Jul 29 Javascript
VUE递归树形实现多级列表
Jul 15 Vue.js
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
德生PL990,目前市面上唯一一款便携式插卡蓝牙全波段高性能收音机
2021/03/02 无线电
php中$this-&amp;gt;含义分析
2009/11/29 PHP
IP138 IP地址查询小偷实现代码
2010/02/15 PHP
php中mysql模块部分功能的简单封装
2011/09/30 PHP
关于使用key/value数据库redis和TTSERVER的心得体会
2013/06/28 PHP
php判断是否为json格式的方法
2014/03/04 PHP
php 使用GD库为页面增加水印示例代码
2014/03/24 PHP
PHP中Http协议post请求参数
2015/11/02 PHP
slice函数的用法 之不错的应用
2006/12/29 Javascript
Prototype使用指南之dom.js
2007/01/10 Javascript
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
2010/02/15 Javascript
浅谈tudou土豆网首页图片延迟加载的效果
2010/06/23 Javascript
javascript框架设计读书笔记之模块加载系统
2014/12/02 Javascript
jQuery常见的选择器及用法介绍
2016/12/20 Javascript
Bootstrap源码解读导航(6)
2016/12/23 Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
2018/05/21 Javascript
JavaScript文本特效实例小结【3个示例】
2018/12/22 Javascript
python使用xmlrpc实例讲解
2013/12/17 Python
Python中用于检查英文字母大写的isupper()方法
2015/05/19 Python
Python将8位的图片转为24位的图片实现方法
2018/10/24 Python
python 使用re.search()筛选后 选取部分结果的方法
2018/11/28 Python
Python从单元素字典中获取key和value的实例
2018/12/31 Python
Python判断对象是否相等及eq函数的讲解
2019/02/25 Python
PyCharm-错误-找不到指定文件python.exe的解决方法
2019/07/01 Python
快速解决vue.js 模板和jinja 模板冲突的问题
2019/07/26 Python
Python Web框架之Django框架Form组件用法详解
2019/08/16 Python
python读取dicom图像示例(SimpleITK和dicom包实现)
2020/01/16 Python
pyinstaller 3.6版本通过pip安装失败的解决办法(推荐)
2020/01/18 Python
深入理解Python 多线程
2020/06/16 Python
美国珠宝精品店:Opulent Jewelers
2019/08/20 全球购物
党员个人整改措施
2014/10/24 职场文书
盲山观后感
2015/06/11 职场文书
无犯罪记录证明样本
2015/06/16 职场文书
2019年农民幸福观调查的实践感悟
2019/12/19 职场文书
MySQL中distinct和count(*)的使用方法比较
2021/05/26 MySQL