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 相关文章推荐
window.dialogArguments 使用说明
Apr 11 Javascript
在Javascript里访问SharePoint列表数据的实现方法
May 22 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
Dec 11 Javascript
jQuery.buildFragment使用方法及思路分析
Jan 07 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
May 27 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
Nov 21 Javascript
webpack配置文件和常用配置项介绍
Apr 28 Javascript
谈谈JavaScript中super(props)的重要性
Feb 12 Javascript
微信小程序动态显示项目倒计时
Jun 20 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
Nov 04 Javascript
js实现树形数据转成扁平数据的方法示例
Feb 27 Javascript
微信小程序自定义顶部组件customHeader的示例代码
Jun 03 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 截取字符串并以零补齐str_pad() 函数
2011/05/07 PHP
PDO::getAvailableDrivers讲解
2019/01/28 PHP
PHP用swoole+websocket和redis实现web一对一聊天
2019/11/05 PHP
js 深拷贝函数
2008/12/04 Javascript
javascript StringBuilder类实现
2008/12/22 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
javascript中[]和{}对象使用介绍
2013/03/20 Javascript
jquery封装的对话框简单实现
2013/07/21 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
2016/05/03 Javascript
Javascript小技能总结(推荐)
2016/06/02 Javascript
js获取form表单所有数据的简单方法
2016/08/18 Javascript
js实现下拉菜单效果
2017/03/01 Javascript
node操作mysql数据库实例详解
2017/03/17 Javascript
Vue.js路由vue-router使用方法详解
2017/03/20 Javascript
nodejs个人博客开发第四步 数据模型
2017/04/12 NodeJs
NodeJs form-data格式传输文件的方法
2017/12/13 NodeJs
详解微信小程序自定义组件的实现及数据交互
2019/07/22 Javascript
layui layer select 选择被遮挡的解决方法
2019/09/21 Javascript
vue element自定义表单验证请求后端接口验证
2019/12/11 Javascript
解决vue watch数据的方法被调用了两次的问题
2020/11/07 Javascript
js实现简易点击切换显示或隐藏
2020/11/29 Javascript
[53:49]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[05:37]DOTA2-DPC中国联赛 正赛 Elephant vs iG 选手采访
2021/03/11 DOTA
python中字符串比较使用is、==和cmp()总结
2018/03/18 Python
Python中的类与类型示例详解
2019/07/10 Python
python图像处理模块Pillow的学习详解
2019/10/09 Python
python打印直角三角形与等腰三角形实例代码
2019/10/20 Python
详解CSS3 Media Queries中媒体属性的使用
2016/02/29 HTML / CSS
凯特方迪化妆品官网:Kat Von D Beauty
2016/11/15 全球购物
mysql的最长数据库名,表名,字段名可以是多长
2014/04/21 面试题
体育系毕业生求职自荐信
2014/04/16 职场文书
优秀少先队工作者事迹材料
2014/05/13 职场文书
管理失职检讨书范文
2015/05/05 职场文书
学生会2016感恩节活动小结
2016/04/01 职场文书
文书工作总结(范文)
2019/07/11 职场文书
广告文案的撰写技巧(实用干货)
2019/08/23 职场文书