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 相关文章推荐
非常不错的功能强大代码简单的管理菜单美化版
Jul 09 Javascript
一些技巧性实用js代码小结
Oct 14 Javascript
javascript 延迟加载技术(lazyload)简单实现
Jan 17 Javascript
一个级联菜单代码学习及removeClass与addClass的应用
Jan 24 Javascript
高性能JavaScript DOM编程(1)
Aug 11 Javascript
JS加载器如何动态加载外部js文件
May 26 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
May 02 Javascript
vue动态路由配置及路由传参的方式
May 23 Javascript
layui在form表单页面通过Validform加入简单验证的方法
Sep 06 Javascript
JS数组方法join()用法实例分析
Jan 18 Javascript
jquery传参及获取方式(两种方式)
Feb 13 jQuery
微信小程序学习之自定义滚动弹窗
Dec 20 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几个数学计算的内部函数学习整理
2011/08/06 PHP
php数组去重复数据示例
2014/02/25 PHP
PHP函数strip_tags的一个bug浅析
2014/05/22 PHP
php实现简单文件下载的方法
2015/01/30 PHP
php多次include后导致全局变量global失效的解决方法
2015/02/28 PHP
jquery里的each使用方法详解
2010/12/22 Javascript
使用js判断控件是否获得焦点
2014/01/03 Javascript
单元选择合并变色示例代码
2014/05/26 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
Javascript堆排序算法详解
2014/12/03 Javascript
jQuery中的pushStack实现原理和应用实例
2015/02/03 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
2015/12/01 Javascript
javascript日期比较方法实例分析
2016/06/17 Javascript
JS实现根据文件字节数返回文件大小的方法
2016/08/02 Javascript
Javascript日期格式化format函数的使用方法
2016/08/30 Javascript
移动端使用localResizeIMG4压缩图片
2017/04/22 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
2017/06/17 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
2017/07/21 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
2017/09/06 jQuery
Bootstrap实现下拉菜单多级联动
2017/11/23 Javascript
分享vue里swiper的一些坑
2018/08/30 Javascript
JS学习笔记之原型链和利用原型实现继承详解
2019/05/29 Javascript
Python常用的爬虫技巧总结
2016/03/28 Python
Python中存取文件的4种不同操作
2018/07/02 Python
利用Python求阴影部分的面积实例代码
2018/12/05 Python
Python实现Linux监控的方法
2019/05/16 Python
python子线程退出及线程退出控制的代码
2019/10/16 Python
python 爬虫百度地图的信息界面的实现方法
2019/10/27 Python
服装创业计划书范文
2014/02/05 职场文书
运动会稿件50字
2014/02/17 职场文书
中国梦演讲稿5分钟
2014/08/19 职场文书
2014年工作总结及2015工作计划
2014/12/12 职场文书
公司食堂管理制度
2015/08/05 职场文书
职场新人知识:如何制定一份合理的工作计划?
2019/09/11 职场文书
AI:如何训练机器学习的模型
2021/04/16 Python
基于Apache Hudi在Google云构建数据湖平台的思路详解
2022/04/07 Servers