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 相关文章推荐
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
Mar 09 Javascript
记录几个javascript有关的小细节
Apr 02 Javascript
封装好的省市地区联动控件附下载
Aug 13 Javascript
js操作输入框提示信息且响应鼠标事件
Mar 25 Javascript
javascript打开word文档的方法
Apr 16 Javascript
ajax如何实现页面局部跳转与结果返回
Aug 24 Javascript
d3.js实现立体柱图的方法详解
Apr 28 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
Oct 24 Javascript
layer.open关闭父窗口 以及调用父页面的方法
Aug 17 Javascript
angular4+百分比进度显示插件用法示例
May 05 Javascript
js实现ajax的用户简单登入功能
Jun 18 Javascript
vue项目,代码提交至码云,iconfont的用法说明
Jul 30 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
解析二进制流接口应用实例 pack、unpack、ord 函数使用方法
2013/06/18 PHP
PHP计算一年多少个星期和每周的开始和结束日期
2014/07/01 PHP
php链表用法实例分析
2015/07/09 PHP
ThinkPHP静态缓存简单配置和使用方法详解
2016/03/23 PHP
大家未必知道的Js技巧收藏
2008/04/07 Javascript
IE6下JS动态设置图片src地址问题
2010/01/08 Javascript
纯Javascript实现Windows 8 Metro风格实现
2013/10/15 Javascript
jquery.ui.draggable中文文档(原文翻译)
2013/11/15 Javascript
javascript打印html内容功能的方法示例
2013/11/28 Javascript
Jquery简单分页实现方法
2015/07/24 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
2016/02/26 Javascript
js 判断一组日期是否是连续的简单实例
2016/07/11 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
2016/10/11 Javascript
Vue2单一事件管理组件通信
2017/05/09 Javascript
json2.js 入门教程之使用方法与实例分析
2017/09/14 Javascript
微信小程序canvas实现刮刮乐效果
2018/07/09 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
2019/01/15 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
2020/03/09 Javascript
基于Vue+Webpack拆分路由文件实现管理
2020/11/16 Javascript
Python requests库用法实例详解
2018/08/14 Python
Python实现二维曲线拟合的方法
2018/12/29 Python
用python 实现在不确定行数情况下多行输入方法
2019/01/28 Python
Python 3.8中实现functools.cached_property功能
2019/05/29 Python
在linux下实现 python 监控usb设备信号
2019/07/03 Python
如何使用django的MTV开发模式返回一个网页
2019/07/22 Python
解析python的局部变量和全局变量
2019/08/15 Python
文秘专业自荐信
2013/10/14 职场文书
日语专业推荐信
2013/11/12 职场文书
采购类个人求职的自我评价
2014/02/18 职场文书
护士实习求职信
2014/06/22 职场文书
文秘应届生求职信
2014/07/05 职场文书
党员民主评议个人总结
2014/10/20 职场文书
爱岗敬业先进典型事迹材料(2016推荐版)
2016/02/26 职场文书
Python制作春联的示例代码
2022/01/22 Python
mysql 排序失效
2022/05/20 MySQL
浅谈css清除浮动(clearfix和clear)的用法
2023/05/21 HTML / CSS