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 相关文章推荐
JS设置获取cookies的方法
Jan 26 Javascript
JavaScript调用ajax获取文本文件内容实现代码
Mar 28 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
Aug 06 Javascript
如何用JS判断两个数字的大小
Jul 21 Javascript
html+js+highcharts绘制圆饼图表的简单实例
Aug 04 Javascript
javascript iframe跨域详解
Oct 26 Javascript
JavaScript插件Tab选项卡效果
Nov 14 Javascript
element-ui table span-method(行合并)的实现代码
Dec 20 Javascript
如何利用ES6进行Promise封装总结
Feb 11 Javascript
JavaScript数组去重的几种方法
Apr 07 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
Aug 12 Javascript
javascript使用正则表达式实现注册登入校验
Sep 23 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 关于访问控制的和运算符优先级介绍
2013/07/08 PHP
ThinkPHP中Session用法详解
2014/11/29 PHP
又拍云异步上传实例教程详解
2016/04/19 PHP
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
2007/11/30 Javascript
js正则表达式的使用详解
2013/07/09 Javascript
Tab切换组件(选项卡功能)实例代码
2013/11/21 Javascript
Jquery 实现checkbox全选方法
2015/01/28 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
2015/11/05 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
2016/01/08 Javascript
Javascript中prototype的使用详解
2016/06/18 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
2016/09/23 Javascript
jquery 判断是否支持Placeholder属性的方法
2017/02/07 Javascript
AngularJS路由Ui-router模块用法示例
2017/05/29 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
2017/10/13 jQuery
小程序Scroll-view上拉滚动刷新数据
2020/06/21 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
2020/11/05 Javascript
python数据结构之二叉树的建立实例
2014/04/29 Python
Windows下Eclipse+PyDev配置Python+PyQt4开发环境
2016/05/17 Python
详解python里使用正则表达式的全匹配功能
2017/10/19 Python
Python 200行代码实现一个滑动验证码过程详解
2019/07/11 Python
Python range与enumerate函数区别解析
2020/02/28 Python
Matplotlib使用Cursor实现UI定位的示例代码
2020/03/12 Python
Django DRF认证组件流程实现原理详解
2020/08/17 Python
Python利用pip安装tar.gz格式的离线资源包
2020/09/14 Python
Skyscanner台湾:全球知名的旅行比价引擎
2018/07/01 全球购物
德国50岁以上交友网站:Lebensfreunde
2020/03/18 全球购物
static函数与普通函数有什么区别
2015/12/25 面试题
二年级语文教学反思
2014/02/02 职场文书
《黄山奇石》教学反思
2014/04/19 职场文书
论文指导教师评语
2014/04/28 职场文书
禁止高声喧哗的标语
2014/06/11 职场文书
2014年办公室文员工作总结
2014/11/12 职场文书
2016年“我们的节日·端午节”活动总结
2016/04/01 职场文书
导游词之杭州岳王庙
2019/11/13 职场文书
关于React Native使用axios进行网络请求的方法
2021/08/02 Javascript
纯 CSS 自定义多行省略的问题(从原理到实现)
2021/11/11 HTML / CSS