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 相关文章推荐
在JavaScript中获取请求的URL参数
Dec 22 Javascript
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
Jul 26 Javascript
jquery连缀语法如何实现
Nov 29 Javascript
javascript full screen 全屏显示页面元素的方法
Sep 27 Javascript
js利用数组length属性清空和截短数组的小例子
Jan 15 Javascript
javascript实现回车键提交表单方法总结
Jan 10 Javascript
JavaScript实现基于Cookie的存储类实例
Apr 10 Javascript
实例讲解jquery中mouseleave和mouseout的区别
Feb 17 Javascript
举例讲解jQuery中可见性过滤选择器的使用
Apr 18 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
Sep 05 Javascript
vue二级菜单导航点击选中事件的方法
Sep 12 Javascript
解决vue项目axios每次请求session不一致的问题
Oct 24 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
windows下升级PHP到5.3.3的过程及注意事项
2010/10/12 PHP
wamp下修改mysql访问密码的解决方法
2013/05/07 PHP
详解PHP的Laravel框架中Eloquent对象关系映射使用
2016/02/26 PHP
编写PHP程序检查字符串中的中文字符个数的实例分享
2016/03/17 PHP
php无限级分类实现评论及回复功能
2019/02/18 PHP
PHP批斗大会之缺失的异常详解
2019/07/09 PHP
PHP7 foreach() 函数修改
2021/03/09 PHP
一样的table?不一样的table(可编辑状态table)
2012/09/19 Javascript
js style动态设置table高度
2014/10/21 Javascript
js代码实现无缝滚动(文字和图片)
2015/08/20 Javascript
JS实现不规则TAB选项卡效果代码
2015/09/16 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
2017/03/21 jQuery
老生常谈jacascript DOM节点获取
2017/04/17 Javascript
打字效果动画的4种实现方法(超简单)
2017/10/18 Javascript
boostrap模态框二次弹出清空原有内容的方法
2018/08/10 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
2018/12/30 Javascript
JavaScript实现轮播图效果代码实例
2019/09/28 Javascript
小程序如何自主实现拦截器的示例代码
2019/11/04 Javascript
vue中使用腾讯云Im的示例
2020/10/23 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
2020/10/27 Javascript
python实现探测socket和web服务示例
2014/03/28 Python
Python内存管理方式和垃圾回收算法解析
2017/11/11 Python
python机器学习实战之最近邻kNN分类器
2017/12/20 Python
Python socket实现简单聊天室
2018/04/01 Python
python爬取网页内容转换为PDF文件
2020/07/28 Python
详解Selenium+PhantomJS+python简单实现爬虫的功能
2019/07/14 Python
django 数据库连接模块解析及简单长连接改造方法
2019/08/29 Python
Python threading.local代码实例及原理解析
2020/03/16 Python
jupyter notebook运行命令显示[*](解决办法)
2020/05/18 Python
Python函数__new__及__init__作用及区别解析
2020/08/31 Python
详解Css3新特性应用之过渡与动画
2017/01/10 HTML / CSS
酒店服务实习自我鉴定
2013/09/22 职场文书
入职担保书范文
2014/05/21 职场文书
社会工作专业自荐信
2014/09/26 职场文书
外出学习心得体会范文
2016/01/18 职场文书
Jupyter notebook 不自动弹出网页的解决方案
2021/05/21 Python