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 相关文章推荐
jquery tools 系列 scrollable(2)
Sep 06 Javascript
EasySlider 基于jQuery功能强大简单易用的滑动门插件
Jun 11 Javascript
js中if语句的几种优化代码写法
Mar 12 Javascript
js 异步操作回调函数如何控制执行顺序
Dec 24 Javascript
javascript数组遍历for与for in区别详解
Dec 04 Javascript
vue.js学习之递归组件
Dec 13 Javascript
canvas绘制表盘时钟
Jan 23 Javascript
js实现一键复制功能
Mar 16 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
Jul 28 Javascript
详解Next.js页面渲染的优化方案
Jan 27 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
Jan 30 Javascript
Koa日志中间件封装开发详解
Mar 09 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 神盾解密
2014/06/08 PHP
微信公众平台之快递查询功能用法实例
2015/04/14 PHP
详解WordPress中调用评论模板和循环输出评论的PHP函数
2016/01/05 PHP
PHP 搜索查询功能实现
2016/11/29 PHP
使用composer命令加载vendor中的第三方类库 的方法
2019/07/09 PHP
用Javascript 和 CSS 实现脚注(Footnote)效果
2009/09/09 Javascript
JavaScript 原型继承
2011/12/26 Javascript
浏览器页面区域大小的js获取方法
2013/09/21 Javascript
表格奇偶行设置不同颜色的核心JS代码
2013/12/24 Javascript
javascript监听鼠标滚轮事件浅析
2014/06/05 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
2015/02/13 Javascript
javascript实现密码强度显示
2015/03/18 Javascript
浅谈时钟的生成(js手写简洁代码)
2016/08/20 Javascript
js 获取本地文件及目录的方法(推荐)
2016/11/10 Javascript
javascript显示系统当前时间代码
2016/12/29 Javascript
详解Vue方法与事件
2017/03/09 Javascript
jquery中each循环的简单回滚操作
2017/05/05 jQuery
js学使用setTimeout实现轮循动画
2017/07/17 Javascript
JavaScript实现购物车基本功能
2017/07/21 Javascript
JQuery常用选择器功能与用法实例分析
2019/12/23 jQuery
JS三级联动代码格式实例详解
2019/12/30 Javascript
jQuery实现颜色打字机的完整代码
2020/03/19 jQuery
django简单的前后端分离的数据传输实例 axios
2020/05/18 Javascript
神经网络相关之基础概念的讲解
2018/12/29 Python
python学习将数据写入文件并保存方法
2020/06/07 Python
奥地利购买珠宝和手表网站:ELLA JUWELEN
2019/09/03 全球购物
雅虎笔试题(字符串操作)
2015/03/24 面试题
JAVA招聘远程笔试题
2015/07/23 面试题
奠基仪式主持词
2014/03/20 职场文书
理发店策划方案
2014/06/05 职场文书
旷工辞退通知书
2015/04/17 职场文书
上级领导检查欢迎词
2015/09/30 职场文书
2016年3月份红领巾广播稿
2015/12/21 职场文书
煤矿安全生产管理协议书
2016/03/22 职场文书
Golang 语言控制并发 Goroutine的方法
2021/06/30 Golang
Java死锁的排查
2022/05/11 Java/Android