原帖地址:http://www.cnblogs.com/egojit/archive/2013/06/05/3118680.html
合肥程序员群:49313181。 合肥实名程序员群:128131462 (不愿透露姓名和信息者勿加入)
Q Q:408365330 E-Mail:egojit@qq.com
在做一个自己的项目的时候遇到需要和数据库交互验证用户名是否存在,这种验证一般都是通过Ajax去验证。在此之前我都是用别人写的JQuery插件。但是这次我决定自己写这样一个JQuery插件。JQuery.EgojitForm。
作为js是一种脚本语言在网络中去用,当然是越短小精悍越好。上代码:
/********************
*作者:egojit
*version:0.1
*时间:2013-6-5
***********************************/
//
; (function () {
$.fn.remote = function (options) {
var defaults = {
urls: new Array(),
type: 'POST',
datas: new Array(),
msg: ""
};
var opts = $.extend({}, $.fn.remote.defaults, defaults, options);
this.each(function (index, element) {
var $this = $(this);
$.ajax({
type: opts.type,
url: opts.urls[index],
data: opts.datas[index],
success: function (msg) {
getHtml(element, opts.msg);
}
});
});
};
//组织HTML提示
function getHtml(hobject, msg) {
debugger;
alert(hobject);
$(hobject).after("<span class='Error'>" + msg + "</span>");
}
})(jQuery);
是不是区区几行代码,就实现了一个功能还算可以的远程验证。
首先在最外层有这样的代码:
;(function(){ } )(JQuery);
这个对于js初学者不好理解。但是细细品味也不是那么难以理解。这个被称为函数闭包。;(function(){ } )(JQuery);在本质上就是执行了一个立即执行的js函数。这个和 ;intParse(); 本质上是一样的。函数立即执行了,那么我们写的插件马上被注册到环境中去。另一方面我在闭包函数中定义更多的函数而不搅乱命名空间也不暴露实现。看上面组织HTML的getHtml()函数就是在闭包中定义的一个函数,不会被暴露到外面起到一种保护的作用。
然后我们再分析闭包中的这段代码:
$.fn.remote = function (options) {
var defaults = {
urls: new Array(),
type: 'POST',
datas: new Array(),
msg: ""
};
var opts = $.extend({}, $.fn.remote.defaults, defaults, options);
this.each(function (index, element) {
var $this = $(this);
$.ajax({
type: opts.type,
url: opts.urls[index],
data: opts.datas[index],
success: function (msg) {
getHtml(element, opts.msg);
}
});
});
};
$.fn.remote就是为jquery对象添加了一个对象,我们可以这样去用$("#id").remote(参数对象)。这里的options参数为我们提供了更多的控制。
这行代码比较关键var opts = $.extend({}, $.fn.remote.defaults, defaults, options);这行代码将后面三个参数的对象合并到一个对象中去并且付给了opts。这样我们在后面可以自由的去用这个对象了。
urls我设定是一个数组这样我们可以同时对多个form元素进行远程验证。只要我们传递数组就行了。这样很容易理解的一个JQuery插件就完成了。
下面我开始使用这个插件,首先引用
<link href="scripts/Jquery.EgojitForm/css/JQuery.EgojitForm.css" rel="stylesheet" />
<script src="scripts/Jquery.EgojitForm/JQuery.EgojitForm.js"></script>
然后我为注册按钮事件添加了代码:
<script type="text/javascript">
/*切换验证码*/
function ToggleCode(obj, codeurl) {
$(obj).children("img").eq(0).attr("src", codeurl + "?time=" + Math.random());
return false;
}
$(document).ready(function () {
$("#btnSubmit").click(function () {
debugger;
$("#J_username").remote({ urls: ["/tools/submit_ajax.ashx?action=validate_username"], datas: [$("#J_username").val()], msg: "用户名已经存在!" });
var form = $("#register_form").formSerialize();
$.ajax({
url: "/tools/submit_ajax.ashx?action=user_register",
type: "POST",
data: form,
success: function () {
alert();
}
});
});
});
</script>
$("#J_username").remote({ urls: ["/tools/submit_ajax.ashx?action=validate_username"], datas: [$("#J_username").val()], msg: "用户名已经存在!" });这个就是应用插件。
urls中放的就是一个远程验证代码的一般处理程序的路径。点击按钮后就会以Ajax的方式到远程数据库中去验证,用户用是否存在。这里我只验证了用户名。点击按钮运行结果如图:
![](http://images.cnitblog.com/blog/335074/201306/05123611-cf0cc1ad1e134a59aed5b9a7ad55caf0.png)
写这样一个JQuery是不是很简单???这样我们可以利用JQuery写自己美妙的插件了。
版权:归博客园和Egojit所有,转载请标明出处。
![](http://www.cnblogs.com/egojit/aggbug/3118680.html?type=1)
本文链接
分享到:
相关推荐
插件名称:jquery表单验证插件 V1.0 插件作者:zy8008 最后更新:2011-4-28 插件说明: datatype类型说明: --------------------------------------- *:必填写,可为任意字符 number:数字 zip:邮政编码 mobile...
jQuery的validation表单验证插件是用于简化网页表单验证的工具,它基于jQuery库,提供了一种高效且可扩展的方式来验证用户输入的数据。这个插件使得开发者能够快速地实现常见输入验证,同时支持自定义验证规则和多...
接着,你需要引入jQuery.validate.js文件,这是验证插件的核心文件。在HTML中,你可以通过以下方式引入这两个脚本: ```html <script src="jquery.js" type="text/javascript"> <script src="jquery.validate.js" ...
JQuery Validation插件是jQuery库的一个扩展,专用于实现客户端的表单验证功能。这个插件提供了丰富的预设验证规则,如必填项、电子邮件格式、数字限制等,并且允许用户自定义验证规则,增强了用户体验,减少了...
`jQuery Validate`是一个基于JavaScript库`jQuery`的验证插件,用于高效地验证用户在表单中输入的数据。它提供了一系列预定义的验证规则,同时允许开发者自定义验证方法以满足特定需求。该框架对于创建具有国际化...
在本章节中,我们通过多个任务来实践 jQuery 高级开发技术,包括实现本地验证和远程验证、实现自定义动画、使用 jQuery 插件等。 七、总结 本章节讲解了 jQuery 高级开发技术的多个方面,包括元素的显示与隐藏、回...
- **remote**: 通过AJAX请求远程验证。 - **email**: 验证电子邮件地址格式。 - **url**: 验证URL格式。 - **date**: 验证日期格式。 - **dateISO**: 验证ISO格式的日期。 - **number**: 验证数字。 - **digits**: ...
本文将汇总 EasyUI 中的一些关键属性,主要聚焦于 `jQuery UI` 插件,尤其是 `easyUI` 中的 `window`, `panel`, `linkbutton`, 和 `validatebox` 这几个组件。 首先,`easyui-window` 是用于创建窗口组件的 CSS 类...
jQuery的validate插件是一个强大的表单验证工具,它为开发者提供了便捷的方式来验证用户输入的数据,确保数据的准确性和安全性。本文将深入讲解jQuery.validate插件的基本使用方法和常见验证规则,以及如何自定义...
### 五、远程验证与问题处理 `remote`规则用于实现远程服务器验证。例如,验证用户名是否存在时,`remote: "/checkName.do"`,会将当前字段的值作为参数发送到指定URL。若返回`true`,验证通过;返回`false`,验证...
jQuery Validate.js 表单验证插件 jQuery Validate.js 是一个流行的表单验证插件,用于验证用户输入的数据是否符合预期的格式和规则。该插件提供了一系列的默认校验规则,能够满足大多数的表单验证需求。 一、使用...
用户输入验证插件源码,源码ALPValidator,ALPValidator提供了下拉式的用户输入验证,灵感来自于jQuery Validation插件。内置验证包括,最小和最大长度验证验证范围(字符串长度和数字),password验证,正则表达式...
该包通过转换为 jquery 验证规则,使 laravel 中定义的验证规则在客户端工作。 它使用。 它还允许使用 Laravel 验证消息,以便您可以为双方显示相同的消息。 功能概述 将验证规则从 laravel 转换为 jquery 验证器 与...
你可以设置`rule`来定义验证规则,如`required`表示必填项,`minlength`和`maxlength`分别规定最小和最大字符数,`remote`则允许通过Ajax进行远程验证。同时,`messages`用于设置当验证失败时显示的提示信息。`debug...
validate是一个基于Jquery的表单验证插件,利用他的remote可以用来自定义远程验证,这篇文章主要介绍了JQuery validate插件Remote用法大全的相关资料,需要的朋友可以参考下
在任务描述中,我们将使用 jQuery UI 实现服饰网站首页的整体布局,包括点击右上角的登录弹出登录对话框,能够实现用户的本地验证和远程验证,并在页面右上角显示用户的欢迎信息。同时,我们还将学习如何使用 jQuery...
Jquery是一个轻量级、功能丰富的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互。...Jquery提供的这些工具使得前端开发者能够灵活地与后台进行数据交换,提高了用户体验并降低了开发难度。
在表单验证领域,jQuery Validation、Auto Help 和 Simple jQuery form validation 等插件可以帮助确保用户输入的数据格式正确。对于表单的下拉框,jQuery Combobox 和 jQuery controlled dependent (or Cascading) ...
类似地,如果我们想要在某些条件下动态地添加远程验证,例如验证 `username` 是否可用,可以这样操作: ```javascript function addUserExistCheck(shouldCheck) { var validator = $("#user_regForm").data(...
总结,jQuery Validate插件以其强大的功能和高度的可定制性,成为了开发人员进行客户端表单验证的首选工具。通过合理利用其提供的规则、提示和事件,可以轻松构建健壮的前端验证机制,提升用户体验并减少服务器端的...