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 相关文章推荐
TextArea 控件的最大长度问题(js json)
Dec 16 Javascript
jquery获得页面元素的坐标值实现思路及代码
Apr 15 Javascript
JavaScript立即执行函数的三种不同写法
Sep 05 Javascript
纯js实现手风琴效果代码
Apr 17 Javascript
javascript 判断当前浏览器版本并判断ie版本
Feb 17 Javascript
canvas绘图不清晰的解决方案
Feb 28 Javascript
js实现音频控制进度条功能
Apr 01 Javascript
JS数组操作之增删改查的简单实现
Aug 21 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
Aug 29 Javascript
jQuery分组选择器简单用法示例
Apr 04 jQuery
koa2的中间件功能及应用示例
Mar 05 Javascript
js实现3D粒子酷炫动态旋转特效
Sep 13 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
[EPIC] Larva vs Flash ZvT @ Crossing Field [2017-10-09]
2020/03/17 星际争霸
Linux中用PHP判断程序运行状态的2个方法
2014/05/04 PHP
PHP实现把文本中的URL转换为链接的auolink()函数分享
2014/07/29 PHP
php对文件夹进行相关操作(遍历、计算大小)
2015/11/04 PHP
php查询操作实现投票功能
2016/05/09 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
javascript操作css属性
2013/12/30 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
2015/03/02 Javascript
jQuery处理XML文件的几种方法
2016/06/14 Javascript
JS传值出现中文参数乱码的解决方法
2016/06/30 Javascript
基于jQuery实现淡入淡出效果轮播图
2020/07/31 Javascript
如何获取元素的最终background-color
2017/02/06 Javascript
socket.io学习教程之基本应用(二)
2017/04/29 Javascript
Node.JS文件系统解析实例详解
2017/05/15 Javascript
js 两个日期比较相差多少天的实例
2017/10/19 Javascript
Vue.js实现分页查询功能
2020/11/15 Javascript
使用vux实现上拉刷新功能遇到的坑
2018/02/08 Javascript
JS实现可视化文件上传
2018/09/08 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
2019/08/02 Javascript
JointJS JavaScript流程图绘制框架解析
2019/08/15 Javascript
vue新建项目并配置标准路由过程解析
2019/12/09 Javascript
JS表格的动态操作完整示例
2020/01/13 Javascript
[06:38]DOTA2怒掀电竞风暴 2013Chinajoy
2013/07/27 DOTA
Python3.2中的字符串函数学习总结
2015/04/23 Python
PyQt5每天必学之进度条效果
2018/04/19 Python
ubuntu 16.04下python版本切换的方法
2019/06/14 Python
纯CSS3发光分享按钮的实现教程
2014/09/06 HTML / CSS
iphoneX 适配客户端H5页面的方法教程
2017/12/08 HTML / CSS
计算机通信工程专业毕业生推荐信
2013/12/24 职场文书
私人房屋买卖协议书
2014/10/04 职场文书
购房协议书范本(无房产证)
2014/10/07 职场文书
前台文员岗位职责
2015/02/04 职场文书
爱心捐书倡议书
2015/04/27 职场文书
小学主题班会教案
2015/08/17 职场文书
美甲店的创业计划书模板
2019/08/23 职场文书
PHP 对接美团大众点评团购券(门票)的开发步骤
2021/04/03 PHP