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 拖拉缩放效果
Dec 10 Javascript
使用jQuery插件创建常规模态窗口登陆效果
Aug 23 Javascript
jquery 淡入淡出效果的简单实现
Feb 07 Javascript
js实现文本框中焦点在最后位置
Mar 04 Javascript
javascript学习笔记(二)数组和对象部分
Sep 30 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
Mar 02 Javascript
浅谈javascript中关于日期和时间的基础知识
Jul 13 Javascript
纯JavaScript实现实时反馈系统时间
Oct 26 Javascript
浅析Vue 和微信小程序的区别、比较
Aug 03 Javascript
js实现开关灯效果
Mar 30 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
Dec 21 Javascript
微信小程序实现打卡签到页面
Sep 21 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
1.PHP简介
2006/10/09 PHP
在VS2008中编译MYSQL5.1.48的方法
2010/07/03 PHP
ThinkPHP写第一个模块应用
2012/02/20 PHP
PHP和JAVA中的重载(overload)和覆盖(override) 介绍
2012/03/01 PHP
jQuery的写法不同导致的兼容性问题的解决方法
2010/07/29 Javascript
如何用ajax来创建一个XMLHttpRequest对象
2012/12/10 Javascript
js window.onload 加载多个函数和追加函数详解
2014/01/08 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
2015/01/05 Javascript
jQuery实现给页面换肤的方法
2015/05/30 Javascript
jQuery下拉美化搜索表单效果代码分享
2015/08/25 Javascript
深入理解MVC中的时间js格式化
2016/05/19 Javascript
Jquery实现跨域异步上传文件总结
2017/02/03 Javascript
Vue中使用canvas方法总结
2019/02/12 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
2019/04/12 Javascript
Vue使用zTree插件封装树组件操作示例
2019/04/25 Javascript
如何实现双向绑定mvvm的原理实现
2019/05/28 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
2020/09/02 Javascript
[01:45]DOTA2众星出演!DSPL刀塔次级职业联赛宣传片
2014/11/21 DOTA
python实现SMTP邮件发送功能
2020/06/16 Python
基于python神经卷积网络的人脸识别
2018/05/24 Python
python 运用Django 开发后台接口的实例
2018/12/11 Python
python实现可逆简单的加密算法
2019/03/22 Python
python向字符串中添加元素的实例方法
2019/06/28 Python
Python机器学习算法库scikit-learn学习之决策树实现方法详解
2019/07/04 Python
python使用yield压平嵌套字典的超简单方法
2019/11/02 Python
Django在Model保存前记录日志实例
2020/05/14 Python
英国领先的餐饮折扣俱乐部:Gourmet Society
2020/07/26 全球购物
泰国最新活动和优惠:Megatix
2020/05/07 全球购物
Web Service面试题:如何搭建Axis2的开发环境
2012/06/20 面试题
建筑专业自我鉴定
2013/10/22 职场文书
企业办公室岗位职责
2014/03/12 职场文书
2014年小学教师工作总结
2014/11/10 职场文书
2014年超市员工工作总结
2014/11/18 职场文书
飞屋环游记观后感
2015/06/08 职场文书
校园新闻稿范文
2015/07/18 职场文书
电力企业职工培训心得体会
2016/01/11 职场文书