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 相关文章推荐
Flex通过JS获取客户端IP和计算机名的实例代码
Nov 21 Javascript
jQuery入门介绍之基础知识
Jan 13 Javascript
jQuery循环动画与获取组件尺寸的方法
Feb 02 Javascript
js文本框走动跑马灯效果代码分享
Aug 25 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
Nov 18 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
Jan 05 Javascript
JavaScript蒙板(model)功能的简单实现代码
Aug 04 Javascript
微信小程序 网络API 上传、下载详解
Nov 09 Javascript
Vue.js实现简单ToDoList 前期准备(一)
Dec 01 Javascript
javascript 操作cookies详解及实例
Feb 22 Javascript
jQuery倒计时代码(超简单)
Feb 27 Javascript
JavaScript中使用参数个数实现重载功能
Sep 01 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 magic_quotes_gpc的一点认识与分析
2008/08/18 PHP
一步一步学习PHP(3) php 函数
2010/02/15 PHP
php中将汉字转换成拼音的函数代码
2012/09/08 PHP
yii2缓存Caching基本用法示例
2016/07/18 PHP
php中引用符号(&amp;)的使用详细介绍
2016/12/06 PHP
php+ajax简单实现全选删除的方法
2016/12/06 PHP
jQuery lazyload 的重复加载错误以及修复方法
2010/11/19 Javascript
jQuery-Tools-overlay 使用介绍
2012/07/14 Javascript
基于JavaScript 下namespace 功能的简单分析
2013/07/05 Javascript
用js的document.write输出的广告无阻塞加载的方法
2014/06/05 Javascript
JS中的Replace方法使用经验分享
2015/05/20 Javascript
基于JQuery实现图片轮播效果(焦点图)
2016/02/02 Javascript
sea.js常用的api简易文档
2016/11/15 Javascript
Bootstrap缩略图与警告框学习使用
2017/02/08 Javascript
jQuery中on方法使用注意事项详解
2017/02/15 Javascript
javascript定时器取消定时器及优化方法
2017/07/08 Javascript
jquery根据name取得select选中的值实例(超简单)
2018/01/25 jQuery
jQuery中的for循环var与let的区别
2018/04/21 jQuery
webpack配置打包后图片路径出错的解决
2018/04/26 Javascript
深入浅析Vue中的 computed 和 watch
2018/06/06 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
2019/10/21 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
2019/12/09 Javascript
vue axios封装httpjs,接口公用配置拦截操作
2020/08/11 Javascript
Python greenlet实现原理和使用示例
2014/09/24 Python
python操作ie登陆土豆网的方法
2015/05/09 Python
wxPython定时器wx.Timer简单应用实例
2015/06/03 Python
Python制作Windows系统服务
2017/03/25 Python
Python+Django+MySQL实现基于Web版的增删改查的示例代码
2020/05/13 Python
python 装饰器重要在哪
2021/02/14 Python
html5 canvas实现跟随鼠标旋转的箭头
2016/03/11 HTML / CSS
道德模范先进事迹
2014/02/14 职场文书
贷款委托书
2014/08/01 职场文书
2015幼儿园新学期寄语
2015/02/27 职场文书
鉴史问廉观后感
2015/06/10 职场文书
《圆的面积》教学反思
2016/02/19 职场文书
Python 中的 copy()和deepcopy()
2021/11/07 Python