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的递增/递减运算符和带操作的赋值运算符的等价式
Dec 08 Javascript
js 函数的副作用分析
Aug 23 Javascript
jquery进行数组遍历如何跳出当前的each循环
Jun 05 Javascript
JavaScript中双叹号!!作用示例介绍
Sep 21 Javascript
Bootstrap Fileinput文件上传组件用法详解
May 10 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
Dec 07 Javascript
View.post() 不靠谱的地方你知道多少
Aug 29 Javascript
angularjs自定义过滤器demo示例
Aug 24 Javascript
vue 实现cli3.0中使用proxy进行代理转发
Oct 30 Javascript
JavaScript中的this/call/apply/bind的使用及区别
Mar 06 Javascript
详解Vue.js 响应接口
Jul 04 Javascript
jQuery treeview树形结构应用
Mar 24 jQuery
今天抽时间给大家整理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 前加at符合@的作用解析
2015/07/31 PHP
PHP匿名函数和use子句用法实例
2016/03/16 PHP
JavaScript DOM学习第一章 W3C DOM简介
2010/02/19 Javascript
基于JQuery的一个简单的鼠标跟随提示效果
2010/09/23 Javascript
读jQuery之十二 删除事件核心方法
2011/07/31 Javascript
JQuery球队选择实例
2015/05/18 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
2016/05/28 Javascript
省市二级联动小案例讲解
2016/07/24 Javascript
前端面试知识点锦集(JavaScript篇)
2016/12/28 Javascript
老生常谈combobox和combotree模糊查询
2017/04/17 Javascript
vue组件实现弹出框点击显示隐藏效果
2020/10/26 Javascript
Vue实现表格中对数据进行转换、处理的方法
2018/09/06 Javascript
详解vue引入子组件方法
2019/02/12 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
2019/05/07 Javascript
如何优雅地取消 JavaScript 异步任务
2020/03/22 Javascript
[43:51]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS Secret
2018/03/31 DOTA
Python中Django框架利用url来控制登录的方法
2015/07/25 Python
教大家玩转Python字符串处理的七种技巧
2017/03/31 Python
python3+PyQt5使用数据库窗口视图
2018/04/24 Python
python实现俄罗斯方块
2018/06/26 Python
Python SQL查询并生成json文件操作示例
2018/08/17 Python
Python函数参数匹配模型通用规则keyword-only参数详解
2019/06/10 Python
python 字典操作提取key,value的方法
2019/06/26 Python
vscode写python时的代码错误提醒和自动格式化的方法
2020/05/07 Python
Selenium环境变量配置(火狐浏览器)及验证实现
2020/12/07 Python
CSS书写规范、顺序和命名规则
2014/03/06 HTML / CSS
初探CSS3中的calc()功能
2015/07/14 HTML / CSS
英国最大的电子产品和家电零售企业:Currys PC World
2016/09/24 全球购物
运动会广播稿100字
2014/01/11 职场文书
表彰会主持词
2014/03/26 职场文书
班干部演讲稿
2014/04/24 职场文书
会计专业毕业生求职信
2014/07/04 职场文书
2014年城市管理工作总结
2014/12/02 职场文书
前台接待岗位职责
2015/02/03 职场文书
2015年社区消防安全工作总结
2015/10/14 职场文书
解决ubuntu安装软件时,status-code=409报错的问题
2022/12/24 Servers