jQuery笔记——插件

验证插件

验证插件(validate.js),是一款验证常规表单数据合法性的插件。使用它,极大的解 放了在表单上繁杂的验证过程,并且错误提示显示的完善也增加了用户体验

插件都可以在JQueryUI 的plugin页面下载,也可以去其官网下载

最重要的文件是 validate.js,还有两个可选的辅助文件:additional-methods.js(控件 class 方式)和 message_zh.js(提示汉化)文件(实际使用,请使用 min 压缩版)

第一步:引入 validate.js

<script type="text/javascript" src="js/jquery.validate.js"></script>

第二步:在 JS 文件中执行

$(‘#reg‘).validate();

默认验证规则

Validate.js 的默认验证规则的写法有两种形式:1.控件属性方式;2.JS 键值对传参方式

//使用控件方式验证“必填和不得小于两位”
<input type="text" class="required" minlength="2" name="user" id="user" />

注意:默认规则里设置布尔值的,直接写到 class 里即可实现。如果是数字或数组区间, 直接使用属性=值的方式即可。而对于错误提示是因为,可以引入中文汉化文件,或直接替 换掉即可

//使用 JS 对象键值对传参方式设置
$(‘#reg‘).validate({
rules : {
user : { //只有一个规则的话,
required : true, //直接 user : ‘required‘,
minlength : 2,
},
},
messages : {
user : {
required : ‘帐号不得为空!‘,
minlength : ‘帐号不得小于 2 位!‘,
},
}
});

注意:由于第一种形式不能设置指定的错误提示信息。推荐使用第二种形式,第二 种形式也避免的 HTML 污染

validate()的方法和选项

除了默认的验证规则外,validate.js 还提供了大量的其他属性和方法供开发者使用。比如,调试属性,错误提示位置一系列比较有用的选项

//jQuery.format 格式化错误提示
$(‘#reg‘).validate({
rules : {
user : {
required : true,
minlength : 5,
rangelength : [5,10]
},
},
messages : {
user : {
required : ‘帐号不得为空!‘,
minlength : jQuery.format(‘帐号不得小于{0}位!‘),
rangelength : jQuery.format(‘帐号限制在{0}-{1}位!‘),
},
},
});
//高亮显示有错误的元素,变色式
highlight: function(element, errorClass) {
$(element).fadeOut(function() {
$(element).fadeIn()
})
},
//高亮显示有错误的元素,变色式
highlight: function(element, errorClass) {
$(element).css(‘border‘, ‘1px solid red‘);
},
//成功的元素移出错误高亮
unhighlight : function (element, errorClass) {
$(element).css(‘border‘, ‘1px solid #ccc‘);
},
//统一包裹错误提示
errorLabelContainer : ‘ol.error‘,
wrapper : ‘li‘,

validate.js 其他功能

使用 remote:url,可以对表单进行 ajax 验证,默认会提交当前验证的值到远程地址。如果需要提交其他的值,可以使用 data 选项

            userName : {
                required : true,
                minlength : 2,
                remote : { //远程验证
                    url : ‘userAction_isUser.action‘,
                    type : ‘post‘,
                },
            },
messages : {
            userName : {
                required : ‘账号不得为空‘,
                minlength : ‘账号最小为{0}位‘,
                remote : ‘账号已被占用‘,
            },

注意:远程验证服务器只能输出‘true‘或‘false‘,不能输出其他值

Ajax表单插件

传统的表单提交,需要多次跳转页面,极大的消耗资源也缺乏良好的用户体验。而这款 form.js 表单的 Ajax 提交插件将解决这个问题

form.js 插件有两个核心方法:ajaxForm()和 ajaxSubmit(),它们集合了从控制表单元素 到决定如何管理提交进行的功能

//ajaxForm 提交方式
$(‘#reg‘).ajaxForm(function () {
alert(‘提交成功!‘);
});

注意:使用 ajaxForm()方法,会直接实现 ajax 提交。自动阻止了默认行为,而它提交的 默认页面是 form 控件的 action 属性的值。提交的方式是 method 属性的值

//ajaxSubmit()提交方式
$(‘#reg‘).submit(function () {
$(this).ajaxSubmit(function () {
alert(‘提交成功!‘);
});
return false;
});

注意:ajaxForm()方法,是针对 form 直接提交的,所以阻止了默认行为。而 ajaxSubmit() 方法,由于是针对 submit()方法的,所以需要手动阻止默认行为:

$("#reg").submit();

而使用了 validate.js 验证 插件,那么 ajaxSubmit()比较适合我们

参数

$(‘#reg‘).submit(function () {
$(this).ajaxSubmit({
url : ‘test.action‘, //设置提交的 url,可覆盖 action 属性
target : ‘#box‘, //服务器返回的内容存放在#box 里
type : ‘POST‘, //GET,POST
dataType : null, //xml,json,script,默认为 null
clearForm : true, //成功提交后,清空表单
resetForm : true, //成功提交后,重置表单
data : { //增加额外的数据提交
aaa : ‘bbb‘, ccc : ‘ddd‘. },
beforeSubmit : function (formData, jqForm, options) {
alert(formData[0].name); //得到传递表单元素的 name
alert(formData[0].value); //得到传递表单元素的 value
alert(jqForm); //得到 form 的 jquery 对象
alert(options); //得到目前 options 设置的属性
alert(‘正在提交中!!!‘);
return true;
},
success : function (responseText, statusText) {
alert(responseText + statusText); //成功后回调
},
error : function (event, errorText, errorType) { //错误时调用
alert(errorText + errorType);
},
});
return false;
});

工具方法

form.js 除了提供两个核心方法之外,还提供了一些常用的工具方法。这些方法主要是 在提交前或后对数据或表单进行处理的

//表单序列化
alert($(‘#reg‘).formSerialize());
//序列化某一个字段
alert($(‘#reg #user‘).fieldSerialize());
//得到某个字段的 value 值
alert($(‘#reg #user‘).fieldValue());
//重置表单
$(‘#reg‘).resetForm()
//清空某个字段
$(‘#reg #user‘).clearFields();

cookie 插件

Cookie 是网站用来在客户端保存识别用户的一种小文件。一般来用库可以保存用户登 录信息、购物数据信息等一系列微小信息

使用 cookie 插件

//生成一个 cookie:
$.cookie(‘user‘, ‘bnbbs‘);

//设置 cookie 参数
$.cookie(‘user‘, ‘bnbbs‘, {
expires : 7, //过期时间,7 天后
path : ‘/‘, //设置路径,上一层
domain : ‘www.ycku.com‘, //设置域名
secure : true, //默认为 false,需要使用安全协议 https
});

//关闭编码/解码,默认为 false
$.cookie.raw = true;

//读取 cookie 数据
alert($.cookie(‘user‘));

//读取所有 cookie 数据
alert($.cookie());

//删除 cookie
$.removeCookie(‘user‘); 

//删除指定路径 cookie
$.removeCookie(‘user‘, { path : ‘/‘, });

注意:读取所有的 cookie 是以对象键值对存放的,所以,也可以$.cookie().user 获取

在线富文本编辑器

这里我使用的是UEditor,是百度开发的一款在产品。UM的主要特点就是容量和加载速度上的改变,主文件的代码量为139k,而且放弃了使用传统的iframe模式,采用了div的加载方式, 以达到更快的加载速度和零加载失败率

1.把下载的Ueditor复制到我们的项目

2.在页面需要的地方引用该插件

    <script type="text/plain" id="myEditor" style="width:560px;height:140px;" name="content" type="text/plain">
请填写问题描述!(1000字以内)
    </script>
    <script type="text/javascript">
      var um = UM.getEditor(‘myEditor‘);
    </script>

以上代码即可完成UEditor的初始化,我们就可以使用了,使用的是默认的其HTML编辑器,可以自定义修改,具体参考UEditor的文档即可

如何获得其中的值?

HTML编辑器,就是把我们输入的文字加上HTML标签,我们需要的是把这段数据(内容+HTML标签)存到数据库中,就需要获得其值,获得值很简单,可以看到我使用了name属性,在后台通过name就可以获得其值

时间: 2024-10-15 11:45:52

jQuery笔记——插件的相关文章

jQuery 常用插件和UI插件 总结笔记

1. jQuery 常用插件 (1). 表单验证插件--validate 该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下:$(form).validate({options});其中form参数表示表单元素名称,options参数表示调用方法时的配置对象,所有的验证规则和异常信息显示的位置都在该对象中进行设置. Jquery Validate 验证规则 (1)required:true 必输字段 (2)remote:"check.

前端:jQuery笔记

前端:jQuery笔记 此系列文章乃是学习jQuery的学习笔记. Asp.net MVC Comet推送 摘要: 一.简介 在Asp.net MVC实现的Comet推送的原理很简单. 服务器端:接收到服务器发送的AJAX请求,服务器端并不返回,而是将其Hold住,待到有东西要通知客户端时,才将这个请求返回. 客户端:请求异步Action,当接收到一个返回时,立即又再发送一个. 缺点:会长期占用一个Asp...阅读全文 posted @ 2015-02-10 12:01 逆心 阅读(1072)

Jquery Media插件使用,解决在线预览及打开PDF文件

用到过PDF的媛媛and猿猿们,总会发现这大千世界之万能播放器插件,总能少了对媒体控制的接口. 你总会发现PDF无法像img图片一样正常加载展现出来,那么我们在通用语法的基础上拓展出了适用于预览及打开的PDF插件便于开发应用. 最主要的是使用到了一个jquery的插件jquery.media.js,使用这个插件就很容易实现了. 该插件可以播放多种类型的多媒体文件包括:Flash, Quicktime, Windows Media Player, Real Player, MP3, Silverl

jQuery.fly插件实现添加购物车抛物线效果

样例 使用电商 APP 购买商品时,很多都有上图的红色小球抛物线效果,下面通过 jQuery.fly 插件来实现一个简单 Demo. 实现 简单思路: 确定抛物线的起始和终止位置: 通过 js 在起始位置创建一个 document 对象,作为红色小球: 通过 jQuery.fly 插件提供的fly函数来移动小球,移动至终止位置: 当小球到达终止位置后,通过fly插件提供的 onEnd 回调函数,将小球销毁: Demo 源码: <!DOCTYPE html> <html lang=&quo

asp.net 实现在线打印功能,jQuery打印插件PrintArea实现自动分页

使用的组件:jQuery打印插件PrintArea,有兴趣的可以研究一下. 使用方法略过,这里将介绍如何实现打印多页是可以分页. 现在提供两种方法思路: 1.根据特定的打印机型号和使用的纸张类型,然后用JS来算出每页多高,按照每张纸的高度来进行适当的增减高度.(这种方式缺点就是只能针对单中类型的纸张,计算十分的繁琐,要些很多加减法 -_-);). 参考A4纸高度的网页:http://www.jb51.net/office/word/67360.html 2.在如上一个思路的方式,试着查找能不能自

jquery.cookie插件使用

jquery.cookie插件是一个在浏览器端对cookie进行操作的,使用非常方便. jquery.cookie中的操作: jquery.cookie.js插件:百度即可下载 创建一个会话cookie: $.cookie(‘cookieName’,'cookieValue’); 注:当没有指明cookie时间时,所创建的cookie有效期默认到用户浏览器关闭止,故被称为会话cookie. 创建一个持久cookie: $.cookie(‘cookieName’,'cookieValue’,{ex

jQuery验证插件

学习要点: 1.使用 validate.js 插件 2.默认验证规则 3.validate()方法和选项 4.validate.js 其他功能 验证插件(validate.js),是一款验证常规表单数据合法性的插件.使用它,极大的解放了在表单上繁杂的验证过程,并且错误提示显示的完善也增加了用户体验. 一.使用 validate.js 插件 官网下载:http://bassistance.de/jquery-plugins/jquery-plugin-validation最重要的文件是valida

jQuery幻灯片插件Skippr

Skippr是一款带左右箭头,索引按钮,滑动切换效果并且轻量.快速的幻灯片 设置 引入jquery.skippr.css.jquery.js.jquery.skippr.js 注意jQuery必须在jquery.skippr.js之前 <head> <link href="css/jquery.skippr.css" rel="stylesheet" type="text/css" > <script src=&qu

jQuery图片插件自动轮播原理解析

经常看到项目要用到图片轮播效果,一般的操作流程都是先到网上找一个好看的JQuery图片轮播插件,然后看下demo,再配下参数.好了,关机下班回家 其余的就交给插件吧. 是不是感觉有了jQuery,世界变得那么美好呢. 本人最近用的一个插件是 jquery.carousel.js,官方网站是:http://richardscarrott.co.uk/posts/view/jquery-carousel-plugin 下面,我们来讨论一下图片轮播原理. 首先来个简单的demo 效果图如下: 这是个导