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 相关文章推荐
使用Mootools动态添加Css样式表代码,兼容各浏览器
Dec 12 Javascript
JQuery实现鼠标滑过显示导航下拉列表
Sep 12 Javascript
利用毫秒减值计算时长的js代码
Sep 22 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
Jul 01 Javascript
javascript url几种编码方式详解
Jun 06 Javascript
详解AngularJS中ng-src指令的使用
Sep 07 Javascript
jQuery实现的网页换肤效果示例
Sep 20 Javascript
JS 动态判断PC和手机浏览器实现代码
Sep 21 Javascript
解决AngualrJS页面刷新导致异常显示问题
Apr 20 Javascript
js数组去重的N种方法(小结)
Jun 07 Javascript
jQuery Migrate 插件用法实例详解
May 22 jQuery
Vue.js中使用Vuex实现组件数据共享案例
Jul 31 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 编程请选择正确的文本编辑软件
2006/12/21 PHP
PHP将session信息存储到数据库的类实例
2015/03/04 PHP
Smarty变量用法详解
2016/05/11 PHP
mapper--图片热点区域高亮组件官方站点
2007/12/22 Javascript
JS与框架页的操作代码
2010/01/17 Javascript
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
JavaScript手机振动API
2016/06/11 Javascript
浅析JS中对函数function的理解(基础篇)
2016/10/14 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
2016/11/21 Javascript
TableSort.js表格排序插件使用方法详解
2017/02/10 Javascript
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
2017/04/13 jQuery
Vue学习笔记进阶篇之vue-cli安装及介绍
2017/07/18 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
2017/08/21 Javascript
node跨域请求方法小结
2017/08/25 Javascript
Vue-cli项目获取本地json文件数据的实例
2018/03/07 Javascript
js实现通过开始结束控制的计时器
2019/02/25 Javascript
jquery实现选项卡切换代码实例
2019/05/14 jQuery
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
2019/08/23 Javascript
vue倒计时刷新页面不会从头开始的解决方法
2020/03/03 Javascript
编写一个javascript元循环求值器的方法
2020/04/14 Javascript
Python程序设计入门(3)数组的使用
2014/06/16 Python
Python中的pprint折腾记
2015/01/21 Python
Python实现将罗马数字转换成普通阿拉伯数字的方法
2017/04/19 Python
python3使用requests模块爬取页面内容的实战演练
2017/09/25 Python
appium+python adb常用命令分享
2020/03/06 Python
Python xlrd模块导入过程及常用操作
2020/06/10 Python
英文自荐信格式
2013/11/28 职场文书
留学生如何写好自荐信
2013/12/27 职场文书
食品采购员岗位职责
2014/04/14 职场文书
民警个人对照检查剖析材料
2014/09/17 职场文书
领导干部个人整改措施落实情况汇报
2014/10/29 职场文书
五一晚会主持词
2015/07/01 职场文书
同学聚会祝酒词
2015/08/10 职场文书
公安纪律作风整顿心得体会
2016/01/23 职场文书
详解Python flask的前后端交互
2022/03/31 Python
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android