jquery表单验证需要做些什么


Posted in Javascript onNovember 17, 2015

一、当元素失去焦点时发生blur 事件。

实例:jQuery blur() 方法
添加函数到 blur 事件。当 <input> 字段失去焦点时发生 blur 事件:

$("input").blur(function(){
alert("This input field has lost its focus.");
});

定义和用法
当元素失去焦点时发生 blur 事件。
blur() 方法触发 blur 事件,或规定当发生 blur 事件时运行的函数。
提示:该方法常与 focus() 方法一起使用。
语法
为被选元素触发 blur 事件:

$(selector).blur()

添加函数到 blur 事件:

$(selector).blur(function)

二、当输入框获取焦点的时候,触发的事件。

实例:jQuery focus() 方法
添加函数到 focus 事件。当 <input> 字段获得焦点时发生 focus 事件:

$("input").focus(function(){
$("span").css("display","inline").fadeOut(2000);
});

定义和用法
当元素获得焦点时(当通过鼠标点击选中元素或通过 tab 键定位到元素时),发生 focus 事件。
focus() 方法触发 focus 事件,或规定当发生 focus 事件时运行的函数。
提示:该方法通常与 blur() 方法一起使用。
语法
触发被选元素的 focus 事件:

$(selector).focus()

添加函数到 focus 事件:

$(selector).focus(function)

三、当键盘键被松开时发生keyup 事件

实例:jQuery keyup() 方法
当键盘键被松开时,设置 <input> 字段的背景颜色:

$("input").keyup(function(){
$("input").css("background-color","pink");
});

定义和用法
与 keyup 事件相关的事件顺序:

  • keydown - 键按下的过程
  • keypress - 键被按下
  • keyup - 键被松开

当键盘键被松开时发生 keyup 事件。
keyup() 方法触发 keyup 事件,或规定当发生 keyup 事件时运行的函数。
提示:请使用 event.which 属性来返回哪个键被按下。
语法
触发被选元素的 keyup 事件:

$(selector).keyup()

添加函数到 keyup 事件:

$(selector).keyup(function)

四、当表单提交的时候触发的事件

实例:jQuery submit() 方法
当提交表单时,显示警告框:

$("form").submit(function(){
alert("Submitted");
});

定义和用法
当提交表单时,会发生 submit 事件。
该事件只适用于 <form> 元素。
submit() 方法触发 submit 事件,或规定当发生 submit 事件时运行的函数。
语法
触发被选元素的 submit 事件:

$(selector).submit()

添加函数到 submit 事件:

$(selector).submit(function)

以上就是jquery表单验证需要做的四件事情,希望大家仔细研究,真正掌握jquery表单验证的技巧。

Javascript 相关文章推荐
js中生成map对象的方法
Jan 09 Javascript
jQuery中的read和JavaScript中的onload函数的区别
Aug 27 Javascript
javascript实现起伏的水波背景效果
May 16 Javascript
CSS+jQuery实现简单的折叠菜单
Dec 20 Javascript
parabola.js抛物线与加入购物车效果的示例代码
Oct 25 Javascript
ES6中字符串string常用的新增方法小结
Nov 07 Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
Aug 01 Javascript
Node.js net模块功能及事件监听用法分析
Jan 05 Javascript
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
vue el-table实现自定义表头
Dec 11 Javascript
使用vant的地域控件追加全部选项
Nov 03 Javascript
10分钟学会js处理json的常用方法
Dec 06 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
Nov 17 #Javascript
jquery验证手机号是否正确实例讲解
Nov 17 #Javascript
跟我学习javascript的prototype使用注意事项
Nov 17 #Javascript
js弹出对话框方式小结
Nov 17 #Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
Nov 17 #Javascript
Jquery 垂直多级手风琴菜单附源码下载
Nov 17 #Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
Nov 17 #Javascript
You might like
php入门学习知识点六 PHP文件的读写操作代码
2011/07/14 PHP
解析数组非数字键名引号的必要性
2013/08/09 PHP
php中出现空白页的原因及解决方法汇总
2014/07/08 PHP
利用ajax和PHP实现简单的流程管理
2017/03/23 PHP
javascript 正则替换 replace(regExp, function)用法
2010/05/22 Javascript
javascript学习笔记(十八) 获得页面中的元素代码
2012/06/20 Javascript
JQuery $.each遍历JavaScript数组对象实例
2014/09/01 Javascript
Node.js的特点和应用场景介绍
2014/11/04 Javascript
jquery分割字符串的方法
2015/06/24 Javascript
动态加载jQuery的两种方法实例分析
2015/07/17 Javascript
javaScript实现滚动新闻的方法
2015/07/30 Javascript
JavaScript基本的输出和嵌入式写法教程
2015/10/20 Javascript
如何利用AngularJS打造一款简单Web应用
2015/12/05 Javascript
微信小程序 保留小数(toFixed)详细介绍
2016/11/16 Javascript
浅谈JavaScript的闭包函数
2016/12/08 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
2017/07/14 Javascript
vue图片上传本地预览组件使用详解
2019/02/20 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
2019/09/10 Javascript
[01:12:40]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第三场 1月25日
2021/03/11 DOTA
Python使用urllib2获取网络资源实例讲解
2013/12/02 Python
Windows中使用wxPython和py2exe开发Python的GUI程序的实例教程
2016/07/11 Python
python使用pil进行图像处理(等比例压缩、裁剪)实例代码
2017/12/11 Python
TensorFlow模型保存/载入的两种方法
2018/03/08 Python
python模块导入的细节详解
2018/12/10 Python
Python字符串通过'+'和join函数拼接新字符串的性能测试比较
2019/03/05 Python
pygame实现成语填空游戏
2019/10/29 Python
零基础小白多久能学会python
2020/06/22 Python
使用python爬取抖音app视频的实例代码
2020/12/01 Python
波兰在线杂货店:Polski Koszyk
2019/11/02 全球购物
Spartoo美国:欧洲排名第一的在线时装零售商
2019/12/12 全球购物
建筑人员岗位职责
2013/12/25 职场文书
技能竞赛活动方案
2014/02/21 职场文书
2014年党务公开方案
2014/05/08 职场文书
装修施工安全责任书
2014/07/24 职场文书
校运会广播稿
2015/08/19 职场文书
新娘婚礼答谢词
2015/09/29 职场文书