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就可以获得其值
jQuery笔记——插件的更多相关文章
- 基于jquery的插件turn.js学习笔记
基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...
- jQuery学习笔记(jquery.form插件)
官网: http://malsup.com/jquery/form/ jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Fo ...
- Jquery笔记和ajax笔记
Jquery笔记:jQuery是一个JavaScript函数库,专为事件处理设计 1.jQuery的引入 <script text="type/javascript" src ...
- 前端:jQuery笔记
前端:jQuery笔记 此系列文章乃是学习jQuery的学习笔记. Asp.net MVC Comet推送 摘要: 一.简介 在Asp.net MVC实现的Comet推送的原理很简单. 服务器端:接收 ...
- 《JQuery常用插件教程》系列分享专栏
<JQuery常用插件教程>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/201719.html 文章 使用jquery插件实现图 ...
- Python全栈之jQuery笔记
jQuery runnoob网址: http://www.runoob.com/jquery/jquery-tutorial.html jQuery API手册: http://www.runoob. ...
- 深入学习jQuery自定义插件
原文地址:jQuery自定义插件学习 1.定义插件的方法 对象级别的插件扩展,即为jQuery类的实例增加方法, 调用:$(选择器).函数名(参数); $(‘#id’).myPlugin(o ...
- [jQuery]jQuery DataTables插件自定义Ajax分页实现
前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...
- 使用jQuery.form插件,实现完美的表单异步提交
传送门:异步编程系列目录…… 时间真快,转眼一个月快结束了,一个月没写博客了!手开始生了,怎么开始呢…… 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 月份的尾巴,今天的主 ...
随机推荐
- 20165202 预备作业3 Linux安装及学习
一.虚拟机安装 娄老师的<基于VirtualBox安装Ubuntu图文教程>对于安装过程的介绍很易懂,但在安装过程中还是遇到了一些问题 Q1:安装教程中下载地址的VM提示安装包损坏 解决办 ...
- jQuery 滑动选项卡SmartTab
Smart Tab Overview Smart Tab is a jQuery plugin for tabbed interface. It is flexible and very easy t ...
- Java并发编程之重入锁
重入锁,顾名思义,就是支持重进入的锁,它表示该锁能够支持一个线程对资源的重复加锁.重进入是指任意线程在获取到锁之后能够再次获取该锁而不会被锁阻塞,该特性的实现需要解决以下两个问题. 1.线程再次获取锁 ...
- React-Native基础_4.View组件
View组件 对应ios 的UIView android 中的view 使用要先导入View import { View } from 'react-native'; 使用就是View标签,可以添加S ...
- SpreadJS 在 Angular2 中支持哪些事件?
SpreadJS 纯前端表格控件是基于 HTML5 的 JavaScript 电子表格和网格功能控件,提供了完备的公式引擎.排序.过滤.输入控件.数据可视化.Excel 导入/导出等功能,适用于 .N ...
- ubuntu下erlang man的安装
下载 http://www.erlang.org/download/otp_doc_man_17.1.tar.gz 找到erlang 安装目录 解压 otp_doc_man_17.1.tar.gz s ...
- java大文件断点续传
java两台服务器之间,大文件上传(续传),采用了Socket通信机制以及JavaIO流两个技术点,具体思路如下: 实现思路:1.服:利用ServerSocket搭建服务器,开启相应端口,进行长连接操 ...
- BZOJ1510 POI2006 Kra-The Disks 【模拟】
BZOJ1510 POI2006 Kra-The Disks LINK 还是粘题面吧,但是图就算了 Description Johnny 在生日时收到了一件特殊的礼物,这件礼物由一个奇形怪状的管子和一 ...
- [Luogu4630][APIO2018]Duathlon 铁人两项
luogu 题目描述 比特镇的路网由 \(m\) 条双向道路连接的 \(n\) 个交叉路口组成. 最近,比特镇获得了一场铁人两项锦标赛的主办权.这场比赛共有两段赛程:选手先完成一段长跑赛程,然后骑自行 ...
- linux各个文件作用
linux下的文件结构,看看每个文件夹都是干吗用的/bin 二进制可执行命令 /dev 设备特殊文件 /etc 系统管理和配置文件 /etc/rc.d 启动的配置文件和脚本 /home 用户主目录的基 ...