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 相关文章推荐
用函数式编程技术编写优美的 JavaScript_ibm
May 16 Javascript
jQuery 位置插件
Dec 25 Javascript
浅谈js基本数据类型和typeof
Aug 09 Javascript
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
Mar 21 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
Aug 19 Javascript
微信小程序分享海报生成的实现方法
Dec 10 Javascript
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
May 13 Javascript
小程序云开发实现数据库异步操作同步化
May 18 Javascript
vue + axios get下载文件功能
Sep 25 Javascript
p5.js临摹旋转爱心
Oct 23 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
Apr 08 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编程效率的53个要点(经验小结)
2010/09/04 PHP
PHP应用JSON技巧讲解
2013/02/03 PHP
PHP中定义数组常量(array常量)的方法
2014/11/17 PHP
PHP magento后台无法登录问题解决方法
2016/11/24 PHP
List all the Databases on a SQL Server
2007/06/21 Javascript
javascript下操作css的float属性的特殊写法
2007/08/22 Javascript
什么是json和jsonp,jQuery json实例详详细说明
2012/12/11 Javascript
JavaScript中使用document.write向页面输出内容实例
2014/10/16 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
2015/03/04 Javascript
js多功能分页组件layPage使用方法详解
2016/05/19 Javascript
js+html5实现canvas绘制椭圆形图案的方法
2016/05/21 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
2016/06/07 Javascript
BootStrap的双日历时间控件使用
2017/07/25 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
2017/11/30 Javascript
vue-router路由懒加载和权限控制详解
2017/12/13 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
2018/01/17 Javascript
create-react-app 修改为多入口编译的方法
2018/08/01 Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
2018/10/24 Javascript
node.js使用express框架进行文件上传详解
2019/03/03 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
2020/04/30 Javascript
Postman参数化实现过程及原理解析
2020/08/13 Javascript
Python中几个比较常见的名词解释
2015/07/04 Python
使用Python的turtle模块画图的方法
2017/11/15 Python
5分钟 Pipenv 上手指南
2018/12/20 Python
为何人工智能(AI)首选Python?读完这篇文章你就知道了(推荐)
2019/04/06 Python
Python通过cv2读取多个USB摄像头
2019/08/28 Python
python之列表推导式的用法
2019/11/29 Python
django xadmin中form_layout添加字段显示方式
2020/03/30 Python
详解python中的闭包
2020/09/07 Python
北京银河万佳Java面试题
2012/03/21 面试题
中海讯通笔试题
2015/09/15 面试题
电子商务专业在校生实习自我鉴定
2013/09/29 职场文书
大学生村官心得体会范文
2014/01/04 职场文书
水利学院求职自荐书
2014/02/01 职场文书
护士感人事迹
2014/05/01 职场文书