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记住用户名和登录密码(两种方式)
Aug 04 Javascript
jQuery实现的右下角广告窗体跟随效果示例
Sep 16 Javascript
原生JavaScript制作计算器
Oct 16 Javascript
Vue2实现组件props双向绑定
Dec 02 Javascript
JS实现类似百叶窗下拉菜单效果
Dec 30 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
Aug 14 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
Sep 15 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
Sep 27 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
Jun 11 Javascript
vue 判断元素内容是否超过宽度的方式
Jul 29 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
Jul 30 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
Aug 18 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生成excel文件的简单方法
2014/02/08 PHP
PHP实现的MongoDB数据库操作类分享
2014/05/12 PHP
PHP中把数据库查询结果输出为json格式简单实例
2015/04/09 PHP
Yii遍历行下每列数据的方法
2016/10/17 PHP
Laravel学习教程之本地化模块
2017/08/18 PHP
Yii框架多语言站点配置方法分析【中文/英文切换站点】
2020/04/07 PHP
javascript addBookmark 加入收藏 多浏览器兼容
2009/08/15 Javascript
js最简单的拖拽效果实现代码
2010/09/24 Javascript
jquery ready(fn)事件使用介绍
2013/08/21 Javascript
自动适应iframe右边的高度
2016/12/22 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
easyUI下拉列表点击事件使用方法
2017/05/18 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
2017/08/15 jQuery
Javascript 编码约定(编码规范)
2018/03/11 Javascript
vue 纯js监听滚动条到底部的实例讲解
2018/09/03 Javascript
Vue.js 实现数据展示全部和收起功能
2018/09/05 Javascript
vue生成文件本地打开查看效果的实例
2018/09/06 Javascript
Vue.js的复用组件开发流程完整记录
2018/11/29 Javascript
[01:08:33]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python自动化工具日志查询分析脚本代码实现
2013/11/26 Python
python网络编程学习笔记(四):域名系统
2014/06/09 Python
python append、extend与insert的区别
2016/10/13 Python
对python中的pop函数和append函数详解
2018/05/04 Python
python3.6+selenium实现操作Frame中的页面元素
2019/07/16 Python
Python sorted对list和dict排序
2020/06/09 Python
Python调用OpenCV实现图像平滑代码实例
2020/06/19 Python
python利用pytesseract 实现本地识别图片文字
2020/12/14 Python
CSS3近阶段篇之酷炫的3D旋转透视
2016/04/28 HTML / CSS
美国优质马术服装购买网站:Breeches.com
2019/12/16 全球购物
超市采购员岗位职责
2014/02/01 职场文书
行政人事岗位职责
2014/03/17 职场文书
《凡卡》教学反思
2014/04/09 职场文书
关于k8s环境部署mysql主从的问题
2022/03/13 MySQL
Python函数对象与闭包函数
2022/04/13 Python
win10清理dns缓存
2022/04/19 数码科技
Python开发五子棋小游戏
2022/04/28 Python