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 相关文章推荐
Extjs3.0 checkboxGroup 动态添加item实现思路
Aug 14 Javascript
js带按钮的提示框可供选择示例代码
Sep 17 Javascript
JS简单实现登陆验证附效果图
Nov 19 Javascript
FullCalendar日历插件应用之数据展现(一)
Dec 23 Javascript
Bootstrap框架的学习教程详解(二)
Oct 18 Javascript
详解RequireJS按需加载样式文件
Apr 12 Javascript
利用JS实现简单的瀑布流加载图片效果
Apr 22 Javascript
JS自动生成动态HTML验证码页面
Jun 14 Javascript
关于 angularJS的一些用法
Nov 29 Javascript
vue interceptor 使用教程实例详解
Sep 13 Javascript
js 计算图片内点个数的示例代码
Apr 04 Javascript
vuex入门最详细整理
Mar 04 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 ob_flush,flush在ie中缓冲无效的解决方法
2010/05/09 PHP
支持png透明图片的php生成缩略图类分享
2015/02/08 PHP
PHP中Closure类的使用方法及详解
2015/10/09 PHP
SCP远程VPS快速搬家和WDCP升级php5.3安装memcached和eaccelerator教程
2017/07/27 PHP
深入认识javascript中的eval函数
2009/11/02 Javascript
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
2010/06/28 Javascript
javascript下利用arguments实现string.format函数
2010/08/24 Javascript
js的alert弹出框出现乱码解决方案
2013/09/02 Javascript
js实现二代身份证号码验证详解
2014/11/20 Javascript
Lua表达式和控制结构学习笔记
2014/12/15 Javascript
Javascript中的五种数据类型详解
2014/12/26 Javascript
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
jquery实现左右滑动菜单效果代码
2015/08/27 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
2015/10/22 Javascript
Zabbix添加Node.js监控的方法
2016/10/20 Javascript
微信小程序 购物车简单实例
2016/10/24 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
2017/02/14 Javascript
ES6新特性之变量和字符串用法示例
2017/04/01 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
2017/05/05 Javascript
vue实现商城上货组件简易版
2017/11/27 Javascript
jQuery实现表单动态添加数据并提交的方法
2018/07/19 jQuery
[01:08]DOTA2次级职业联赛 - Wings 战队宣传片
2014/12/01 DOTA
[57:53]Secret vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[53:38]OG vs LGD 2018国际邀请赛淘汰赛BO3 第三场 8.26
2018/08/30 DOTA
用python结合jieba和wordcloud实现词云效果
2017/09/05 Python
利用python循环创建多个文件的方法
2018/10/25 Python
win8.1安装Python 2.7版环境图文详解
2019/07/01 Python
python中tkinter的应用:修改字体的实例讲解
2019/07/17 Python
Python常用模块os.path之文件及路径操作方法
2019/12/03 Python
scrapy处理python爬虫调度详解
2020/11/23 Python
人事主管的岗位职责
2013/11/16 职场文书
客服工作职责
2013/12/11 职场文书
内业资料员岗位职责
2014/01/04 职场文书
2015年超市工作总结范文
2015/05/26 职场文书
公司周年庆典致辞
2015/07/30 职场文书
六一儿童节致辞稿(3篇)
2019/07/11 职场文书