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代码(亲测兼容IE,Firefox,chrome等浏览器)
Nov 18 Javascript
Jquery插件easyUi表单验证提交(示例代码)
Dec 30 Javascript
jQuery实现简单的日期输入格式化控件
Mar 12 Javascript
全面解析Javascript无限添加QQ好友原理
Jun 15 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
Nov 17 Javascript
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
Vue 页面状态保持页面间数据传输的一种方法(推荐)
Nov 01 Javascript
关于vue状态过渡transition不起作用的原因解决
Apr 09 Javascript
详解ES6 CLASS在微信小程序中的应用实例
Apr 24 Javascript
在Vue中创建可重用的 Transition的方法
Jun 02 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
Feb 10 Javascript
vue elementUI表格控制对应列
Apr 13 Vue.js
今天抽时间给大家整理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 cron中的批处理
2008/09/16 PHP
PHP 巧用数组降低程序的时间复杂度
2010/01/01 PHP
DedeCMS dede_channeltype表字段注释
2010/04/07 PHP
浅析PHP递归函数返回值使用方法
2013/02/18 PHP
Django中的cookie与session操作实例代码
2017/08/17 PHP
php通过pecl方式安装扩展的实例讲解
2018/02/02 PHP
PHP7新特性
2021/03/09 PHP
Javascript模板技术
2007/04/27 Javascript
jquery中常用的SET和GET
2009/01/13 Javascript
js限制文本框为整数和货币的函数代码
2010/10/13 Javascript
javascript学习笔记(三)显示当时时间的代码
2011/04/08 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
2015/09/14 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
2015/11/02 Javascript
javascript生成随机数方法汇总
2015/11/12 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
2016/08/02 Javascript
JS操作xml对象转换为Json对象示例
2017/03/25 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
2017/04/20 Javascript
vue之数据交互实例代码
2017/06/20 Javascript
vue 地图可视化 maptalks 篇实例代码详解
2019/05/21 Javascript
layui自定义插件citySelect实现省市区三级联动选择
2019/07/26 Javascript
js+html+css实现手动轮播和自动轮播
2020/12/30 Javascript
Python多线程实例教程
2014/09/06 Python
Python编写登陆接口的方法
2017/07/10 Python
Python自定义简单图轴简单实例
2018/01/08 Python
Python 生成 -1~1 之间的随机数矩阵方法
2018/08/04 Python
Python两台电脑实现TCP通信的方法示例
2019/05/06 Python
python函数定义和调用过程详解
2020/02/09 Python
Django实现内容缓存实例方法
2020/06/30 Python
Numpy实现卷积神经网络(CNN)的示例
2020/10/09 Python
HTML5梦幻之旅——炫丽的流星雨效果实现过程
2013/08/06 HTML / CSS
工商管理专业毕业生自我鉴定2014
2014/10/04 职场文书
2014年汽车销售工作总结
2014/12/01 职场文书
python爬虫框架feapde的使用简介
2021/04/20 Python
【海涛教你打DOTA】剑圣第一人称视角解说
2022/04/01 DOTA
多人盗宝《绿林侠盗》第三赛季4.5上线 跨平台实装
2022/04/03 其他游戏
java中为什么说子类的构造方法默认访问的是父类的无参构造方法
2022/04/13 Java/Android